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

考虑使用如下表单组件：

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

导出默认类表单扩展React.Component{
建造师（道具）{
this.state={email:'}
this.onChange=this.onChange.bind（this）
}
onChange（事件）{
this.setState（{email:event.target.value}）
} 
渲染（）{
返回(
{this.props.title}
)
}
}

---

然后我会在我的应用程序中的其他地方使用这个

组件，让我们假设在主页组件中。在该主页中，我将有

这个.someFunction

在表单求和时执行，如何将表单值/状态传递给它？

在组件中创建一个回调函数，该回调函数将调用发送到

表单的函数，并将状态作为参数

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

导出默认类表单扩展React.Component{
建造师（道具）{
this.state={email:'}
this.onChange=this.onChange.bind（this）
this.onSubmit=this.onSubmit.bind（this）
}
onChange（事件）{
this.setState（{email:event.target.value}）
} 
onSubmit（）{
this.props.onSubmit（this.state）；
} 
渲染（）{
返回(
{this.props.title}
)
}
}
在组件中创建一个回调，该回调将调用发送到
表单的函数，并将状态作为参数

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

导出默认类表单扩展React.Component{
建造师（道具）{
this.state={email:'}
this.onChange=this.onChange.bind（this）
this.onSubmit=this.onSubmit.bind（this）
}
onChange（事件）{
this.setState（{email:event.target.value}）
} 
onSubmit（）{
this.props.onSubmit（this.state）；
} 
渲染（）{
返回(
{this.props.title}
)
}
}
您（本质上）希望做的是向组件链上传递一些数据（到父组件）。您可以使用vanilla React实现这一点，但我不会建议您这样做

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

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

我承认，通过使用这些容器实现一个解决方案，您正在增加学习曲线，但请记住React只视图层，它对解决状态管理问题没有多大帮助。
您（本质上）希望做的是在组件链上传递一些数据（到父组件）。您可以使用vanilla React实现这一点，但我不会建议您这样做

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

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

我承认，通过使用这些容器实现解决方案，您正在向学习曲线中添加内容，但请记住，React仅是视图层，它无法帮助您解决与状态管理相关的问题。
您可以这样做：

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

导出默认类表单扩展React.Component{
建造师（道具）{
this.state={email:'}
this.onChange=this.onChange.bind（this）
this.onSubmit=this.onSubmit.bind（this）
}
onChange（事件）{
this.setState（{email:event.target.value}）
}
//环绕this.props.onSubmit并向其中添加数据。
onSubmit（）{
this.props.onSubmit（this.state）；
}
渲染（）{
返回(
{this.props.title}
)
}
}

与您绑定和使用onChange的方式非常相似。
您可以这样做：

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

导出默认类表单扩展React.Component{
建造师（道具）{
this.state={email:'}
this.onChange=this.onChange.bind（this）
this.onSubmit=this.onSubmit.bind（this）
}
onChange（事件）{
this.setState（{email:event.target.value}）
}
//环绕this.props.onSubmit并向其中添加数据。
onSubmit（）{
this.props.onSubmit（this.state）；
}
渲染（）{
返回(
{this.props.title}
)
}
}

非常类似于您绑定和使用onChange的方式