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定义并包含respecctive输入的值。我认为你应该传递道具并在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

此示例将输入值存储为道具作为用户类型。 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

}

如何在reactjs上调用输入值

3 个答案:

示例1