键入一个输入字段,使用reactjs禁用其他输入字段?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (132)

假设我们有两个输入字段,如果我们开始键入一个输入字段,则其他一个将被禁用,反之亦然。我们如何使用react js编写逻辑?

提问于
用户回答回答于

首先,你必须定义输入的含义。通常,可以通过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>
  );
}

现在,要在开始输入时禁用所有这些,您可以将其添加到<input>

<input ...
  disabled={isTyping}
/>

但是,自然希望保持当前正在键入的输入框。为此,可以将你键入的最后一个输入的标签保存为以下状态:

handleChange(event, label){
  this.setState(prevState => ({inputValues: {...inputValues, [label]: event.target.value}, isTyping: true, lastInput: label}), setTimeout(revertIsTypingToFalse, 500))
}

现在,你可以通过将最后使用的输入标签与各个输入框标签进行比较来禁用所有未输入的输入,如下所示:

<input
  ...
  disabled={isTyping && lastInput !== 'input1'}
/>

扫码关注云+社区

领取腾讯云代金券