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

Question

在满足以下条件的情况下，React / React Native 中是否有任何方法（请提供示例）让组件呈现带毫秒的计时器、提交按钮和文本输入字段？

用户可以在输入字段中键入并查看他正在键入的内容。
没有为输入字段分配事件处理程序
单击提交按钮后，程序会显示带有用户键入的文本的 alert()。
组件有一个初始状态值，最初显示在输入字段中。
用户在键入时没有遇到意外行为。

一个让我想到了这个关于此事的更具体的问题（我希望你能看到它是如何相关的）。

React 中最普遍接受的实现输入字段的模式建议始终使用 onChange 事件 (see the docs)，但我认为这会导致代码中的重复和噪音，所以我正在寻找一个更好的模式，当开发人员只需要一个输入表单字段时，他不必考虑 onChange 行为。

附加说明 1： "state value" 是组件状态中的一个值。即 "constructor(){ this.state = {value:'Initial Value'} };".

附注 2： 计时器的目的是确保您定期触发 render()，这使得显示初始 "state value"，并允许用户正常键入而无需 onChange 处理程序相应地更新状态。

Answer 1

这种基于 refs 的模式会满足您的条件吗？

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>

工作代码笔：https://codepen.io/anon/pen/roypOx

因为条件只是关于输入字段而不是计时器，所以我没有在示例中包含计时器。

Answer 2

您要找的是不受控制的组件。

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

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

React text form fields without onChange

javascript

architecture

dry

reactjs

react-native