使用 reactjs 在一个输入字段中键入禁用其他输入字段答案

【问题标题】：Typing in one input field disabling other input field using reactjs使用 reactjs 在一个输入字段中键入禁用其他输入字段
【发布时间】：2019-01-19 14:48:56
【问题描述】：

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

提前致谢。

【问题讨论】：

你到底想完成什么？
我们有两个输入标签，例如：。其中任何一个都可以写。如果我们开始输入 A 输入标签 B 应该被禁用。或者如果我们开始输入 B 输入标签 A 应该被禁用。
使用代码示例编辑您的主要问题

标签： reactjs typescript redux react-redux

【解决方案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'}
/>

Voula，给你！

【讨论】：

【解决方案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'));

【讨论】：