Question

我是reactjs的新手。我想在reactjs的同一页面中提交表单数据。我正在使用数组存储数据，但是数组以一维存储数据，我希望它以多维形式存储。我怎样才能做到这一点？我正在使用push（）函数，并且我的表单中有5个输入字段。这是我的代码：

    var data = [{}];
export default class Form extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    username: "",
    email: "",
    password: ""
  };

  change = e => {
    this.props.onChange({ [e.target.name]: e.target.value });
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();
    console.log(this.state);

    data.push(this.state.firstName,this.state.lastName,this.state.username,this.state.email,this.state.password);
    document.getElementById('hello').innerHTML = data;
};
render(){
//form  input fields
}
}

谢谢。

Answer 1

在状态对象中设置所有表单数据值。

提交后，您可以在状态中设置所有这些值，然后可以在render方法中使用表单数据查看更新后的状态。

关于

handleSubmit(data) {this.setState({formData: data})}

然后在渲染中，您可以将其查看为

render() { console.log(this.state.formData); return(...); }

现在就按需操作此变量。需要注意的是，根据您在第一次提交之前的声明，该状态将为null/empty/undefined。

如何在Reactjs的同一页面中显示提交的表单数据？

1 个答案: