React.js - 如何在表单提交时设置状态？

Question

新手 React 问题 - 我在尝试遵循文档时感到非常困惑。

我想要一个简单的文本输入，在单击按钮时在表单下方显示输入值。很简单，对吧？

到目前为止，这是我的组件：

 export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text"  value='' />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

但是，它根本不起作用——当用户键入时，表单不显示任何内容。

我究竟做错了什么？

原文由 Richard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

变化：

1. 您需要从输入元素中删除 value='' 否则它将不允许您键入任何内容，您也没有使用任何 onChange 函数。

元素的使用方法：

受控组件： 定义一个 onChange 函数和值属性，并在该更改函数内更新该值。

非受控组件： 不定义value属性，使用 ref 获取element的值。

2. 将 ref 与输入元素一起使用以获取其在 onSubmit 函数中的值。

检查这个：

 class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.element.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" ref={el => this.element = el} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

ReactDOM.render(<TextInput/>, document.getElementById('app'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你需要有一个受控的输入，你会在用户输入文本字段时保存值，然后在提交时你可以从状态中获取数据。

 export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onChange = (event) => this.setState({ value: event.target.value });

  handleSubmit(event) {
    event.preventDefault();
    //this.setState({ value: event.target.value });
    consoole.log(this.state.value);
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" value={this.state.value} onChange={this.onChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

这是使用受控组件获取用户输入的传统方式。

原文由 Crysfel 发布，翻译遵循 CC BY-SA 3.0 许可协议