Question

考虑使用表单组件：

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

然后我会在我的app中的其他地方使用这个<Form onSubmit={this.someFunction} />组件，让我们假设在HomePage组件中。在该主页内部，我将this.someFunction在表单到达时执行，如何将表单值/状态传递给它？

Answer 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>
        )
    }
}

Answer 2

您（本质上）要做的是将一些数据传递到组件链（到父组件）。你可以用vanilla React来实现它，但我不打算建议你这样做。

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

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

我承认，您通过使用这些容器实施解决方案来增加学习曲线，但请记住，React 只是视图层，它对周围的问题无法帮助您管理。

Answer 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的方式。

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

3 个答案: