Question

React / React Native中是否有任何方法（请提供示例）使组件以毫秒为单位渲染计时器，提交按钮以及满足以下条件的文本输入字段？

用户可以在输入字段中输入内容，然后查看自己的输入内容。
未将事件处理程序分配给输入字段
单击“提交”按钮时，程序将显示一个alert（），其中包含用户键入的文本。
该组件的初始状态值最初显示在输入字段中。
用户在键入时不会遇到意外行为。

一个previous question about this subject使我想到了关于此问题的更具体的问题（希望您能看到它的相关性）。

React中最普遍接受的用于实现输入字段的模式建议始终使用onChange事件（see the docs），但是我认为这会导致代码中的重复和干扰，因此我正在寻找更好的方法一种模式，当开发人员只需要一个输入表单字段时，开发人员就不必考虑onChange行为。

附加说明1：“状态值”是处于组件状态的值。即“ constructor（）{this.state = {value：'Initial Value'}};“。

附加说明2：计时器的目的是确保您定期触发一次render（），这将使显示初始“状态值”成为难题，并允许用户在没有onChange处理程序的情况下进行正常键入即可相应地更新状态。

Answer 1

您的条件将通过这种基于引用的模式来满足吗？

class App extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = null;
  }
  
  handleSubmit = () => alert(this.textInput.getDOMNode().value);
  render() {
    return (
      <div>
        <textarea 
          ref={el => this.textInput = el}
        >
          My initial value
        </textarea>
        <button onClick={this.handleSubmit}type="button">Submit</button>
      </div>
    );
  }
  
}

React.render(<App />, document.getElementById('app'));

<div id="app"></div>

有效的Codepen：https://codepen.io/anon/pen/roypOx

因为条件仅涉及输入字段，而不涉及计时器，因此我在示例中未包括计时器。

Answer 2

您在寻找什么叫做不受控制的组件。

在这里看看：https://reactjs.org/docs/uncontrolled-components.html

在没有onChange的情况下反应文本表单字段

2 个答案: