javascript - 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>
    );
  }
}

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

我做错了什么？

Answer 1

变化:

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

元素的使用方式:

Controlled Component: 定义一个 onChange 函数和值属性，并在该更改函数内更新该值。

Uncontrolled Component: 不定义 value 属性，使用 ref 获取元素的值。

2.使用ref使用 input 元素在 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'/>