Question

我正在尝试使用react和json服务器（在本地主机端口上）创建一个简单的登录系统。我有2个输入，一个输入名称，另一个输入密码。我的问题是，当我尝试提交这些输入时，在服务器端，名称和密码都与密码中的值一起出现。

class AddAcc extends Component {
  constructor(props) {
    super(props);
    this.input = null;
    this.pushAcc = this.pushAcc.bind(this)
  }

  async pushAcc() {
    try {
      await Axios
        .post(
          `${BASE_URL}users`,
          {
            name: this.input.value,
            password: this.input.value,
          },
          {
            'Content-Type': 'aplication/json'
          }
        )
      this.props.newAcc(this.input.value);
    } catch(e) {
    }
  }
render() {
  return(
    <div>
      <p>
        <input
          ref={name => this.input = name} />
      </p>
      <div>
        <h3>Enter Password</h3>
      </div>
      <p>
        <input
          ref={pass => this.input = pass} />
      </p>
      <button onClick = {this.pushAcc} type="submit"> SUBMIT </button>
    </div>
  )
}
}

export default AddAcc;

Answer 1

因为您使用相同的参考名this.input来输入姓名和密码。

更改密码

<input ref={pass => this.passwordInput = pass} />

Answer 2

这仅仅是因为您使用相同的名称作为姓名和密码。如此简单的解决方案，

<input ref={name => this.inputName = name} />
<input ref={pass => this.inputPass = pass} />

然后执行此操作

await Axios
    .post(
      `${BASE_URL}users`,
      {
        name: this.inputName.value,
        password: this.inputPass.value,
      },
      {
        'Content-Type': 'aplication/json'
      }
    )

如何将2个输入中的数据发送到一个json服务器对象中？

2 个答案: