Question

我试图在reactjs中构建表单输入。以下代码仅适用于一种表单输入。

现在我想按照

添加两个表单输入

Firstname <input type="text" id="fname" name="fname"><br>
Lastname <input type="text" id="lname" name="lname"><br>

下面的

是我想要实现上面两个表单输入的工作代码。源

https://reactjs.org/docs/forms.html

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

Answer 1

我发现在React中管理表单的最佳方法是确保每个<input>代码都具有name值。然后确保您的组件状态包含与name完全匹配的每个输入的字段。

在onChange处理程序中，您可以说：

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

这将更新状态并更改任何输入，并将更改应用于该特定状态值。

然后，对于handleSubmit，您将这些值从州发送到您需要处理表单信息的位置。

Answer 2

尝试这个

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

反应js多输入形式

2 个答案: