如何在reactjs上调用输入值

Question

这是我的反应形式...我需要获取输入的值，但每当我检查网络时，以下内容都是未定义的。请帮我;它添加了数据但为空。

      <td>Name</td>
      <td>
      <input type="text"
            
            value={this.props.Employee_Name} 
             onChange={(e) => this.handleChange(e)}
            /> 
      </td>
      </tr>
      <tr>
      <td>Address</td>
      <td>
       <input type="text"
          
             name="Address"
             value={this.props.Address}/>
      </td>
      </tr>
      <tr>
      <td>Department</td>
      <td>
       <input type="text"
               value={this.props.Department}
      /> 
      </td>
      </tr>
      </tbody>
      </table>

  </div>
  </div>
  <div className="modal-footer">
    <input type="submit" className="btn btn-info"  onClick = { this.handleSubmit.bind(this, this.Employee_Name ,this.Address ,this.Department)}  value =" Add Employee"/>
    <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
  </div>
 </form>

这部分是我的代码，用于获取 post 方法的 API，以便它将在 API 上发送数据。

handleSubmit( name, address,department){
  debugger
 const data = {
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
  .then(function(response) {
  }).catch(function(err) {
    // Error :(
  });
}

Answer 1

在您的

handleSubmit

函数中，您将值传递为

onClick = { this.handleSubmit.bind(this, this.Employee_Name ,this.Address ,this.Department)} 

但我没有看到

this.Employee_Name ,this.Address ,this.Department

已定义并包含相应输入的值。我认为你应该传递道具并在

onChange

和

Address

上也有

Department

。

尝试

onClick = { this.handleSubmit.bind(this, this.props.Employee_Name ,this.props.Address ,this.props.Department)} 

Answer 2

以反应方式做到这一点，

您需要将道具设置为状态并渲染组件形式，如下所示：

<input type="text"
                   value={this.state.form.department}
         onChange={(e)=>this.changed(e,'department')} 
/> 

类似的方法，您可以更改其他输入字段。

并将更改后的函数定义为如下所示：

changed(e,key){
  var state=Object.assign({},this.state);
  state.form[department]=e.target.value;
  this.setState({state})
}

设置用户在组件状态下表单的输入值。

现在，对于发布请求数据：

const data = {
      'Employee_Name': this.state.form.name,
      'Address':this.state.form.address,
      'Department': this.state.department
    }

或者正如你正在做的：

    <input type="submit" className="btn btn-info"  
onClick = { this.handleSubmit.bind(this, this.state.form.employee_Name ,this.state.form.address ,this.state.form.department)}  
value =" Add Employee"/>

Answer 3

示例1

此示例将输入值存储到 props 中 当用户键入时。 className 将用于映射到状态值。

内部渲染方法：

<input
    type="text"
    className="Employee_Name"
    onChange={this.handleKeyUp.bind(this)}
/>

<input
    type="text"
    className="Address"
    onChange={this.handleKeyUp.bind(this)}
/>

<input
    type="text"
    className="Department"
    onChange={this.handleKeyUp.bind(this)}
/>
<button
    type="submit"
    onClick={this.handleSubmit.bind(this)}
    >
    SUMBUT
</button>

handleKeyUp

函数设置状态

handleKeyUp(e) {
   let inputType = e.target.className
   let value = e.target.value
   let obj = {}
   obj[inputType] = value

   this.setState(obj)

    return
}


handleSubmit(e) {
    e.preventDefault()

    const { name, address, department} = this.state
    // do your fetch here

}