每日一个项目：Bin2Dec (T1)
我的实现：react+styled-components
非常简单的一个项目
const Bin2Dec = () => {
const [res, setRes] = useState(0)
const [valid, setValid] = useState(true)
const [input, setInput] = useState("")
const onInput = (e) => {
let str = e.target.value
let isValid = validBinary(str)
setValid(isValid)
if (isValid) {
setInput(str)
}
}
const onClick = () => {
let num = parseBinary(input)
setRes(num)
console.log(num)
}
return (
<VerticalContainer>
<Container>
<Input onChange={onInput} value={input}/>
<Button onClick={onClick} disabled={!valid}>
点我转换
</Button>
<Input disabled={true} value={res} onChange={() => res}/>
</Container>
{!valid? <Error>请输入0或1</Error>: null}
</VerticalContainer>
);
};
共三个状态
- input: 左边的值
- res: 右边的值
- valid: 输入的值是否合法
在输入的时候判断输入是否合法
点击按钮的时候计算出值即可
const validBinary = (str) => {
for (const ch of str) {
// 字符串必须是二进制串
if (ch !== "0" && ch !== "1") {
return false
}
}
return true
}
const parseBinary = (str) => {
// 得到二进制数组
let arr = str.split("").map(Number)
let res = arr.reduceRight((prev, cur, index) => {
if (cur === "0") {
return prev
} else {
return prev + Math.pow(2, arr.length - index -1)
}
}, 0)
return res
}
输入其他字符时
\
