blocks|key|4084738|text|首先，你必须定义打字意味着什么。通常，这可以通过在每次击键后设置几毫秒的timeOut来完成(如果需要，还可以重新启动它)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4084739|粗略地说，你可以用这个实现“类型状态检查”(注意，这个例子非常简单！)：|4084740|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>
++);
}|code-block|syntax|javascript|4084741|(revertIsTypingToFalse可能是一个按它说的做的函数--将isTyping状态设置回false)|4084742|现在，要在开始输入时禁用所有这些命令，可以将以下代码添加到<input>中|4084743|<input+...
++disabled={isTyping}
/>|4084744|但很自然，您希望保持当前键入的输入框处于启用状态。为此，您可以将您键入的最后一个输入的标签保存到状态中，如下所示：|4084745|handleChange(event,+label){
++this.setState(prevState+=>+({inputValues:+{...inputValues,+[label]:+event.target.value},+isTyping:+true,+lastInput:+label}),+setTimeout(revertIsTypingToFalse,+500))
}|4084746|(记住在构造函数时将lastInput添加到状态中！)|4084747|现在，您可以通过将上次使用的输入标签与各个输入框标签进行比较来禁用所有未键入的输入，如下所示：|4084748|<input
++...
++disabled={isTyping+&&+lastInput+!==+'input1'}
/>|4084749|沃拉，这就对了！|4084750|entityMap^0|10|7|0|0|0|12|8|0|T|7|0|0|0|0|A|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1N|8|@]|D|@]|E|$]]|$1|10|3|11|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|12|3|13|5|6|7|1P|8|@]|D|@]|E|$]]|$1|14|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|15|$]]

<p>First, you will have to define what it means to be typing. Generally, it could be done by setting a <code>timeOut</code> of some milliseconds after each keystroke (and if necessary, restarting it).</p>

<p>Roughly you can achieve the "typing state check" with this (note that the example is very simplified!):</p>

<pre><code>constructor(props) {
  super(props);
  this.state = {
    isTyping: false,
    inputValues: {
      input1: '',
      input2: '',
      input3: ''
    }
  }
}

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

render() {
  return (
    &lt;div&gt;
      &lt;input onChange={event =&gt; this.handleChange(event, 'input1')} value={this.state.inputValues.input1} disabled={this.state.isTyping}&gt;
      &lt;input onChange={event =&gt; this.handleChange(event, 'input2')} value={this.state.inputValues.input2} disabled={this.state.isTyping}&gt;
      &lt;input onChange={event =&gt; this.handleChange(event, 'input3')} value={this.state.inputValues.input3} disabled={this.state.isTyping}&gt;
    &lt;/div&gt;
  );
}
</code></pre>

<p>(revertIsTypingToFalse would be a function that does what it says - sets <code>isTyping</code> state back to false)</p>

<p>Now, to disable all of them when you start typing you could add this to <code>&lt;input&gt;</code>:</p>

<pre><code>&lt;input ...
  disabled={isTyping}
/&gt;
</code></pre>

<p>But naturally you want to keep the input box that you are currently typing to enabled. To do that, you could save the label of last input that you were typing into state like this:</p>

<pre><code>handleChange(event, label){
  this.setState(prevState =&gt; ({inputValues: {...inputValues, [label]: event.target.value}, isTyping: true, lastInput: label}), setTimeout(revertIsTypingToFalse, 500))
}
</code></pre>

<p>(remember to add <code>lastInput</code> into state at constructor!)</p>

<p>Now you can disable all the inputs that are not being typed into by comparing the last used input label to individual input boxes labels, like this:</p>

<pre><code>&lt;input
  ...
  disabled={isTyping &amp;&amp; lastInput !== 'input1'}
/&gt;
</code></pre>

<p>Voula, there you have it!</p>


blocks|key|4083947|text|我使用了下面的代码，它工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4083948|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'));|code-block|syntax|javascript|4083949|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have used the below code it worked fine: </p>

<pre><code>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(
     &lt;div&gt;
     &lt;input type="text"
            placeholder= " input 1 "
            disabled = {(this.state.input1)}
            onInput = {this.handleinput1.bind(this)}
            /&gt;
     &lt;input type="text" 
         placeholder= " input 2 "
         onInput = {this.handleinput2.bind(this)}
         disabled = {(this.state.input2)}/&gt;
    &lt;/div&gt;
);
  }
 };

  React.render(&lt;Typing /&gt;, document.getElementById('root'));
</code></pre>


<p>Suppose we have two input fields if we start typing in one input field other one would be disabled and vice-versa. How can we write a logic using react js? </p>

<p>Thanks in advance. </p>


Typing in one input field disabling other input field using reactjs

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

问在一个输入字段中键入使用reactjs禁用其他输入字段
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在一个输入字段中键入使用reactjs禁用其他输入字段EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在一个输入字段中键入使用reactjs禁用其他输入字段
EN