Question

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

我尝试使用Meteor和React提交表单。当我单击提交按钮时，我得到undefined undefined但这只是因为我无法输入输入字段。无法理解。这是我的代码。

目前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，但后来使用了一个叫做event的东西。这些变量名应该相同。

handleChange(e) {


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

Answer 2

除了一些错别字之外你没有错。在handleChange方法中，您使用event来引用事件对象，尽管它在参数列表中定义为e。除此之外，在onSubmit方法中，您还要记录州的name和age属性，而您的表单字段用于名为title和{的属性{1}}。

我在this pen

中指出了这一点

无法以reactjs形式向输入字段提供文本

2 个答案: