时间戳

首页 > 解决方案 > 联系表格 onChange 函数调用错误

reactjs - 联系表格 onChange 函数调用错误

问题描述

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

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

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

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

标签： reactjs

解决方案

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

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

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')
);

推荐阅读