Question

我在ReactJS中有一个非常简单的POST表单。我有两个字段，格式为name和description。表单提交了，但是我的问题是它将描述的值同时提交到名称和描述字段中。

{data: {…}, status: 201, statusText: "Created"
{id: 9, name: "Testing the desc", description: "Testing the desc", …}

我的React JS文件：从'react'导入React；从“ axios”导入axios；

export default class NewDistillery extends React.Component {
  state = {
    name: '',
    description: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value, description: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();    
    axios.post(`http://localhost:3000/distilleries.json`, {name: this.state.name, description: this.state.description} )
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
          <h2>Add Distillery</h2>
        <form onSubmit={this.handleSubmit}>
          <label className="input-label">
            Name:
            <input className="input" type="text" name="name" onChange={this.handleChange} />
          </label>
          <label className="input-label">
            Description:
            <input className="input" type="text-area" name="description" onChange={this.handleChange} />
          </label>
          <button className="button" type="submit">Add</button>
        </form>
      </div>
    )
  }
}

我尝试了setState事件的一些选项，例如：

  handleChange = event => {
    this.setState({ name: event.target.value});
    this.setState({ description: event.target.value });
  }

但这显然是有区别的。

我是React的新手，所以不确定我要去哪里。

Answer 1

您将使用与提交时提交的最后一个输入字段相同的输入值覆盖名称和描述。

使用输入字段名称属性来确定要更新的键

将handleChange更改为

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

Answer 2

您应该遵循简单的方法：

1-您输入的所有内容都应具有相同的名称，例如，如果您输入的名称为“ name”，“ description”和“ snippet”，则状态变量应与名称相同。确切的名称，“名称”，“描述”和“代码段”。

2-您可以创建一个统一的handleChange（）函数，并且不要在其中提及输入名称，例如：

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

Axios POST提交名称：两次字段

2 个答案: