ReactJS 表单提交如何访问字段值？

Question

我正在尝试在 ReactJS 中创建一个表单。例如，https://facebook.github.io/react/docs/forms.html 告诉我们如何创建一个 UI 元素，其中更改元素的值将触发 XYZ，其中发生事件的对象可以访问输入，因此可以访问其注释。

假设在同一个较大的组件中，我有一个用于输入数据的 TEXTAREA 和一个用于单击以保存它的按钮。

我该如何做才能让点击按钮创建一个新的空白记录并将其 "description" 字段初始化为 TEXTAREA 的内容？

谢谢，

Answer 1

有多种方法可以做到这一点。一个简单的实现（忽略 flux 和 kin）如下所示：

var React = require('react');

class Form extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {description: ''};
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange(e) {
    this.setState({[e.target.name]: e.target.value});
  }

  onSubmit(e) {
    e.preventDefault();
    fetch(this.props.formAction, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        description: this.state.description
      })
    });

    this.setState({description: ''});
  }

  render() {
    return (
      <form action={this.props.action} method={this.props.method} onSubmit={this.onSubmit}>
        <textarea onChange={this.onChange} name="description">
          {this.state.description}
        </textarea>
        <button>Submit</button>
      </form>
    );
  }
}

Form.propTypes = {
  action: React.PropTypes.string.isRequired,
  method: React.PropTypes.string,
}

Form.defaultProps = {
  action: '/action/url',
  method: 'post',
};

module.exports = Form;

使用 React 的组件方法 setState 来管理您的应用程序数据。调用 onSubmit 时，防止浏览器默认行为与您的 ajax 版本相同。

如果使用 Flux，则该提取调用将改为 Action。

ReactJS 表单提交如何访问字段值？

How can a ReactJS form submission access field values?

javascript

reactjs

react-jsx