Question

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

假设在同一个更大的组件中，我有一个TEXTAREA来输入数据，还有一个按钮来点击保存它。

如何正确操作以便点击按钮创建新的空白记录并初始化其＆＃34;描述＆＃34;字段到TEXTAREA的内容？

谢谢，

Answer 1

有很多方法可以做到这一点。一个天真的实现（忽略通量和亲属）将如下所示：

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的Component方法setState来管理您的应用程序数据。调用onSubmit时，请使用您的ajax'd版本阻止浏览器默认行为。

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

ReactJS如何形成提交访问字段值？

1 个答案: