在一个输入字段中键入使用reactjs禁用其他输入字段
在一个输入字段中键入使用reactjs禁用其他输入字段
提问于 2018-08-13 04:47:46
假设我们有两个输入域，如果我们开始在一个输入域中输入，另一个输入域将被禁用，反之亦然。我们如何使用react js来编写逻辑？
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 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'}
/>沃拉，这就对了！
Stack Overflow用户
发布于 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'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51812731
复制相关文章
相似问题