Question

构造函数和函数：

train_test_split()

表单（为清晰起见，删除了classNames）：

constructor(props) {
    super(props);

    this.state = {
        tagline: 'We rank what people are talking about.',
        year: new Date().getFullYear()
    };

    this.onFormSubmit = this.onFormSubmit.bind(this);
}

onFormSubmit(e) {
    console.log('onFormSubmit', e)
    console.log('this.state', this.state);
};

这是注销的，请注意没有电子邮件或密码信息：

完整登录组件代码

<form onSubmit={ this.onFormSubmit }>
    <div className="fl w100">
        <div>
            <input type="text" id="email" value={ this.state.email }/>
            <label htmlFor="email">Email</label>
        </div>
    </div>

    <div className="fl w100">
        <div>
            <input type="password" id="password" value={ this.state.password }/>
            <label htmlFor="password">Password</label>
        </div>
    </div>

    <button type="submit">
        Login
    </button>
</form>

Answer 1

建议：

1。您正在使用带有输入字段的value属性，但未定义onChange方法，因此输入字段将为只读，因为状态值不会得到更新。

2. 您需要通过删除value属性为所有输入字段定义onChange事件或使其成为不受控制的元素。

3. 如果不受控制的元素定义每个字段的引用并访问该值，请使用this.ref_name.value。

通过定义onChange事件：

为每个输入元素定义name属性（name应该与状态变量名相同，它将有助于更新状态，我们可以处理单个onChange函数中的所有更改），如下所示：

<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

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

按Uncotrolled元素：

<input type="text" ref={el => this.el = el} />

现在在onSubmit函数中使用this.el.value来访问此输入字段的值。

请查看此答案以供参考：https://stackoverflow.com/a/43695213/5185595

Answer 2

您没有收到电子邮件或密码信息，因为您已在状态console.log('this.state', this.state);中通过，并且您尚未设置电子邮件和密码的状态。

现在，您有两个选择：

设置状态并从那里获取表单信息
将输入值传递给处理信息的函数

对于选项1，您需要设置电子邮件和密码的状态（尽管不建议设置密码状态）和输入上的onChange事件处理程序。

设置onChange事件处理程序。

<form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" onChange={this.handleEmailChange} value={ this.state.email } />

  <input type="password" id="password" onChange={this.handlePasswordChange} value={ this.state.password } />

  <button type="submit">
    Login
  </button>
</form>

设置email和password状态的功能。

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

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

并且不要忘记在构造函数中初始化email和password的状态并绑定函数。

constructor(props) {
  super(props);

  this.state = {
    email: '',
    password: ''
  };

  this.handleEmailChange = this.handleEmailChange.bind(this);
  this.handlePasswordChange = this.handlePasswordChange.bind(this);
}

你完成了！然后在onFormSubmit函数上，只需访问州email和password中的this.state.email和this.state.password值，并执行您喜欢的操作。

现在对于选项2，您只需传入输入的event.target.value，这些是电子邮件和密码的值，并将这些值传递给表单事件处理程序onSubmit函数，从那里你可以做任何你想做的事情（设置状态或更新电子邮件和密码，更改它们，等等）。

<form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" name="theEmail" />

  <input type="password" id="password" name="thePassword" />

  <button type="submit">
    Login
  </button>
</form>

onFormSubmit功能。

onFormSubmit(event) {
  const email = event.target.theEmail.value;
  const password = event.target.thePassword.value;

  // do stuff
  console.log('Email:', email);
  console.log('Password:', password);
};

完成您尝试做的事情的更简单和推荐的方法是选项2。

请记住，您的应用处理得越少越好。

Answer 3

所以我如何处理这个问题就是使用所谓的受控组件将值存储在你的状态中。制作受控组件非常简单，这是一个基本的实现：

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

此处的关键是handleChange函数和onChange属性。每次输入字段更改时，将调用handleChange函数并更新状态。

您可以在此处的文档中找到更多信息：https://facebook.github.io/react/docs/forms.html

如何从React中的输入字段获取表单数据

3 个答案: