我几乎已经使用React构建了一个简单的计算器。 我只是麻烦多个小数点。我试图做的是写一个条件,但是没有用。你能帮我吗?
这是我的代码的一部分:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '0'
};
}
addToInput = e => {
const value = e.target.value;
const oldValue = this.state.input;
if (this.state.input != '0') {
this.setState({ input: (this.state.input + value) });
} else if (value == '.' && oldValue.includes('.')) {
console.log('Mulitple decimals');
} else {
this.setState({ input: value });
}
};
render() {
return (<Button addToInput={ this.addToInput } />);
}
}
class Button extends React.Component {
render() {
return (
<div className="row">
<button
value="."
id="decimal"
onClick={ this.props.addToInput }
>.
</button>
<button
value="0"
id="zero"
onClick={ this.props.addToInput }
>0
</button>
<button
value="-"
id="subtract"
onClick={ this.props.addToInput }
>-
</button>
</div>
);
}
}
提前谢谢!
答案 0 :(得分:0)
您可以查看输入的值,检查它是否为.
,并检查输入是否已经有一个。如果是这样,则不执行任何操作,否则将值添加到输入的末尾:
addToInput = e => {
const { value } = e.target;
const { input } = this.state;
if (value === "." && input.includes(".")) {
return;
}
this.setState({ input: `${input}${value}` });
};
答案 1 :(得分:0)
像这样更改您的addToInput
:
addToInput = e => {
const value = e.target.value;
const oldValue = this.state.input;
if (value === '.' && oldValue.includes('.')) {
console.log('Mulitple decimals');
return;
}
if (this.state.input !== '0') {
this.setState({ input: (this.state.input + value) });
} else {
this.setState({ input: value });
}
};
为什么遇到问题:
addToInput = e => {
const value = e.target.value;
const oldValue = this.state.input;
if (this.state.input !== '0') {
// after first addToInput you will end up here ALWAYS
this.setState({ input: (this.state.input + value) });
} else if (value === '.' && oldValue.includes('.')) {
// You will never be here because this.state.input !== '0' is always true after first addToInput
console.log('Mulitple decimals');
} else {
// you will end up here only when you lunch your addToInput first time
this.setState({ input: value });
}
};
答案 2 :(得分:0)
好的正则表达式将为您提供帮助。
const regex = /^[1-9]\d*(\.\d+)?$/;
然后您可以检查您的值:
regex.test('222') // true
regex.test('222.') // false
regex.test('222.0') // true
regex.test('222.0.1') // false
regex.test('222.01234') // true
regex.test('abc') // false