假设我们有两个输入域,如果我们开始在一个输入域中输入,另一个输入域将被禁用,反之亦然。我们如何使用react js来编写逻辑?
提前谢谢。
发布于 2018-08-13 05:47:53
首先,你必须定义打字意味着什么。通常,这可以通过在每次击键后设置几毫秒的timeOut
来完成(如果需要,还可以重新启动它)。
粗略地说,你可以用这个实现“类型状态检查”(注意,这个例子非常简单!):
constructor(props) {
super(props);
this.state = {
isTyping: false,
inputValues: {
input1: '',
input2: '',
input3: ''
}
}
}
const handleChange = (event, label) => {
this.setState(prevState => ({inputValues: {...inputValues, [label]: event.target.value}, isTyping: true}), setTimeout(revertIsTypingToFalse, 500))
}
render() {
return (
<div>
<input onChange={event => this.handleChange(event, 'input1')} value={this.state.inputValues.input1} disabled={this.state.isTyping}>
<input onChange={event => this.handleChange(event, 'input2')} value={this.state.inputValues.input2} disabled={this.state.isTyping}>
<input onChange={event => this.handleChange(event, 'input3')} value={this.state.inputValues.input3} disabled={this.state.isTyping}>
</div>
);
}
(revertIsTypingToFalse可能是一个按它说的做的函数--将isTyping
状态设置回false)
现在,要在开始输入时禁用所有这些命令,可以将以下代码添加到<input>
中
<input ...
disabled={isTyping}
/>
但很自然,您希望保持当前键入的输入框处于启用状态。为此,您可以将您键入的最后一个输入的标签保存到状态中,如下所示:
handleChange(event, label){
this.setState(prevState => ({inputValues: {...inputValues, [label]: event.target.value}, isTyping: true, lastInput: label}), setTimeout(revertIsTypingToFalse, 500))
}
(记住在构造函数时将lastInput
添加到状态中!)
现在,您可以通过将上次使用的输入标签与各个输入框标签进行比较来禁用所有未键入的输入,如下所示:
<input
...
disabled={isTyping && lastInput !== 'input1'}
/>
沃拉,这就对了!
发布于 2018-08-17 23:16:43
我使用了下面的代码,它工作得很好:
class Typing extends React.Component {
constructor(props) {
super(props);
this.state = { input1: false, input2: false }
}
handleinput1() {
this.setState( {input1: false, input2: true} )
}
handleinput2() {
this.setState( {input1: true, input2: false} )
}
render() {
return(
<div>
<input type="text"
placeholder= " input 1 "
disabled = {(this.state.input1)}
onInput = {this.handleinput1.bind(this)}
/>
<input type="text"
placeholder= " input 2 "
onInput = {this.handleinput2.bind(this)}
disabled = {(this.state.input2)}/>
</div>
);
}
};
React.render(<Typing />, document.getElementById('root'));
https://stackoverflow.com/questions/51812731
复制相似问题