联系表格 onChange 函数调用错误答案

【问题标题】：Contact form onChange function call error联系表格 onChange 函数调用错误
【发布时间】：2018-11-04 02:33:09
【问题描述】：

我正在使用 react.js 创建联系表单，但出现以下错误； “当电子邮件字段更改时，ContactForm 组件应使用更新的联系人数据调用 onChanges。”有什么帮助吗？！

我在contact.jsx 文件中收到此错误。不确定如何解决此问题。

rextester 链接：https://rextester.com/LWKDFE70058

我知道解决方法是添加 'this.props.name.onChange(this.props.data)' 行，但不确定在哪里添加。任何帮助将不胜感激？！

【问题讨论】：

propTypes 是父组件而不是子组件，意味着这个道具必须从父组件传递。如果您正在处理没有父依赖项的组件（从父项传递道具），则无需声明。总之这告诉你，如果你想使用组件，那么你需要传递这个属性。

标签： reactjs

【解决方案1】：

您需要将输入字段绑定到数据模型对象。而且当输入字段值发生变化时，需要将新值设置回对象模型。

例如。看看下面的示例代码：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

【讨论】：