reactjs如何调用输入值答案

【问题标题】：How do call the input value on reactjsreactjs如何调用输入值
【发布时间】：2017-05-19 09:01:50
【问题描述】：

这是我的反应表单...我需要获取输入的值，但是每当我检查网络时，以下是未定义的，请帮我添加数据但为空

          <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 :(
  });
}

【问题讨论】：

控制台有什么错误吗？
未捕获的类型错误：将循环结构转换为 JSON

标签： javascript asp.net api reactjs web

【解决方案1】：

在您的 handleSubmit 函数中，您将值传递为

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

但我没有看到 this.Employee_Name ,this.Address ,this.Department 定义并包含相应输入的值。我认为您应该传递道具并在Address 和Department 上也有一个onChange。

试试

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

【讨论】：

如果你的道具被改变了，你应该看到 handleSubmit 函数中的值，看看你得到了什么
被正确更改了吗？你什么意思？
您有一个 onChange 函数，例如 value={this.props.Employee_Name} onChange={(e) => this.handleChange(e)}，如果您正确编写 handleChange 函数来更新父级中的值，然后该值将作为 Employee_Name 道具传递给当前组件跨度>
我也试过了，但输入仍然未定义
试试handleSubmit = ( name, address,department) => { console.log(this.props.Employee_Name)

【解决方案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"/>

【讨论】：

我认为这将适用于更新部分，...我正在添加员工..我尝试过 put 方法及其工作..
您能具体说明您遇到的问题吗？
我正在添加另一个员工，但是当我添加它时会添加空值
是的，因为您以错误的方式尝试顶部拾取表单值。
你还在尝试更新道具，而不是状态吗？因为我必须说道具应该是只读的！

【解决方案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

}

【讨论】：