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

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

然后我会使用这个 <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>
        )
    }
}