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

Question

Consider having form component like:

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

I would then use this <Form onSubmit={this.someFunction} /> component elsewhere within my app, lets assume inside HomePage component. Inside that home page I would have this.someFunction that executes when form is summited, how can I pass form value / state to it?

Answer 1

Create a callback in your component that will call the function sent to Form with the state as parameter.

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

What you're (essentially) looking to do is pass some data up the component chain (to a parent component). You could implement this with vanilla React, but I'm not going to advise you to do this.

If you try implementing some kind of state management yourself, unless your app is incredibly simple or you are an incredibly disciplined one-man-team, it's likely to get messy and unpredictable fast.

I advocate one way data flow . Data should flow one way through your app - down. I recommend you look at implementing a solution with Flux or Redux (Redux is my preference). These are both state containers that will propagate state throughout your app and enforce a set of conventions which you help you maintain structure to your data flow as your app grows.

I admit, you're adding to the learning curve by implementing a solution with these containers, but remember that React is only the view layer and it can't help you much with problems surrounding state management.

Answer 3

You could do this:

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

Very similar to how you bound and use your onChange.