javascript - 需要获取reactjs中非受控组件中的多个表单元素

Question

我正在尝试获取多个表单字段输入值并将其发送到服务器。但我只能在提交时获取最后一个字段的值。我正在使用不受控制的组件，因为我正在尝试编辑表单然后更新它。请帮助我获取表单中输入的所有表单详细信息。

    import React from 'react';
    import axios from 'axios';

    class Update extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          info:''

         };

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

         handleSubmit(event) {
           event.preventDefault();
     console.log(event);
             alert(event);


         }

         componentDidMount(){
           let self = this;
           axios.get('http://localhost:8080/studentById')
           .then(function(data) {
           //console.log(data);
           self.setState({info:data.data});
           });

         }

         render() {
           return (
    <div>

             <form onSubmit={this.handleSubmit}  >

               <label className="w3-label w3-text-blue w3-large w3-margin-0 ">
                 First Name:
                 <input autoFocus type="text" className="w3-input w3-border"   defaultValue={this.state.info.Firstname} ref={(input) => this.input = input} required />
               </label>
                <label className="w3-label w3-text-blue w3-large">
                Last Name:
                 <input type="text" className="w3-input w3-border" defaultValue={this.state.info.Lastname} ref={(input) => this.input = input} required />
               </label>
                 <input className="w3-btn-block w3-blue w3-margin-bottom w3-large" type="submit" value="Submit" />
   </div>
 )};
}        

Answer 1

在您的代码中，您将所有引用分配给同一个变量。 (您的代码经过简化以显示我的意思)

First Name:
<input ref={(input) => this.input = input} />
Last Name:
<input ref={(input) => this.input = input} />

而是对不同的输入字段使用不同的变量:

First Name:
<input ref={(input) => this.firstNameInput = input} />
Last Name:
<input ref={(input) => this.lastNameInput = input} />