无法以react.js形式向输入字段提供文本

Question

我是一个很新的反应者，如果这是一个愚蠢的问题，请原谅。

我正在尝试使用Meteor和React提交表单。 当我单击提交按钮时，我得到未定义的未定义，但这仅仅是因为我无法在输入字段中键入。 没办法。 这是我的代码。

目前， onSubmit唯一要做的就是提供日志。

    export default class AddDeal extends React.Component {
  constructor(props) {
    super(props);

    // Set the state
    this.state = {
      title: '',
      description: ''
    };

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

  onSubmit(e) {
    e.preventDefault();

    console.log(this.state.name, this.state.age);
  }

  handleChange(e) {


    this.setState({
      [event.target.name]: event.target.value
    });
  }

  render() {
    return (
    <div>
      <h1>Add Deal</h1>
      <form onSubmit={this.onSubmit}>
        <label><input value={this.state.title} onChange={this.handleChange} type="text" name="title"/></label>
        <label><input value={this.state.description} onChange={this.handleChange} type="text" name="description" /></label>
        <input type="submit" value="Submit"/>
      </form>
    </div>
    );
  }
}

谢谢。

Answer 1

在句柄更改功能中，将event更改为e ，反之亦然。 您正在接受e，但随后使用了称为事件的东西。 这些变量名称应相同。

handleChange(e) {


  this.setState({
    [e.target.name]: e.target.value
  });
}

Answer 2

除了一些错别字，你什么都没错。 在handleChange方法中，您使用event来引用事件对象，尽管在参数列表中将其定义为e 。 除此之外，在onSubmit方法中，您正在记录状态的name和age属性，而表单字段用于名为title和description属性。

我在这支笔上指出