Question

假设我们有两个输入字段，如果我们开始在一个输入字段中键入，则另一个将被禁用，反之亦然。我们如何使用react js编写逻辑？

先谢谢了。

Answer 1

首先，您必须定义输入的含义。通常，可以通过在每次击键后几毫秒内设置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'}
/>

沃拉，你有它！

Answer 2

我使用了下面的代码，效果很好：

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'));

使用reactjs在一个输入字段中输入以禁用其他输入字段

2 个答案: