如何从表单组件中获取状态/值？答案

【问题标题】：How to get state / value from form component?如何从表单组件中获取状态/值？
【发布时间】：2016-09-24 17:38:07
【问题描述】：

考虑有这样的表单组件：

export default class Form extends React.Component {
  constructor (props) {
    this.state = { email: '' }
    this.onChange = this.onChange.bind(this)
  }

  onChange(event) {
    this.setState({ email: event.target.value })
  } 

  render () {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <form className={cx('Form')} onSubmit={this.props.onSubmit}>
          <input className={cx('Form-email')} type='email' placeholder='email' value={this.state.email} onChange={this.onChange} />
          <input className={cx('Form-btn')} type='submit' value='sign up' />
        </form>
      </div>
    )
  }
}

然后我会在我的应用程序的其他地方使用这个<Form onSubmit={this.someFunction} /> 组件，假设在 HomePage 组件中。在那个主页里面，我会有this.someFunction，它在表单到达顶峰时执行，我怎样才能将表单值/状态传递给它？

【问题讨论】：

标签： javascript forms reactjs

【解决方案1】：

在您的组件中创建一个回调，该回调将调用发送到Form 的函数，并将状态作为参数。

export default class Form extends React.Component {
    constructor (props) {
        this.state = { email: '' }
        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(event) {
        this.setState({ email: event.target.value })
    } 

    onSubmit() {
        this.props.onSubmit(this.state);
    } 

    render () {
        return (
            <div>
                <h2>{this.props.title}</h2>
                <form className={cx('Form')} onSubmit={this.onSubmit}>
                    <input className={cx('Form-email')} type='email' placeholder='email' value={this.state.email} onChange={this.onChange} />
                    <input className={cx('Form-btn')} type='submit' value='sign up' />
                </form>
            </div>
        )
    }
}

【讨论】：

【解决方案2】：

您（本质上）想要做的是将一些数据向上传递到组件链（到父组件）。您可以使用原版 React 实现此功能，但我不建议您这样做。

如果您尝试自己实施某种状态管理，除非您的应用非常简单，或者您是一个纪律严明的单人团队，否则它可能会很快变得混乱和不可预测。

我提倡单向数据流。数据应该以一种方式通过您的应用程序 - 向下流动。我建议您考虑使用Flux 或Redux 实施解决方案（我更喜欢Redux）。它们都是状态容器，它们将在您的应用中传播状态并强制执行一组约定，这些约定可帮助您在应用增长时维护数据流的结构。

我承认，通过使用这些容器实现解决方案，您正在增加学习曲线，但请记住，React 只是视图层，它不能帮助您解决围绕状态的问题管理。

【讨论】：

【解决方案3】：

你可以这样做：

export default class Form extends React.Component {
  constructor (props) {
    this.state = { email: '' }
    this.onChange = this.onChange.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }

  onChange(event) {
    this.setState({ email: event.target.value })
  }

  // Wrap around this.props.onSubmit and add data to it.
  onSubmit() {
    this.props.onSubmit(this.state);
  }

  render () {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <form className={cx('Form')} onSubmit={this.onSubmit}>
          <input className={cx('Form-email')} type='email' placeholder='email' value={this.state.email} onChange={this.onChange} />
          <input className={cx('Form-btn')} type='submit' value='sign up' />
        </form>
      </div>
    )
  }
}

与您绑定和使用 onChange 的方式非常相似。

【讨论】：