Question

我有一个表单，其中有一些文本框和下拉菜单。我正在使用新值更改下拉值时重新呈现此表单组件。使用更新值可以很好地重新渲染，但是我无法从文本框或下拉列表中手动更改值。预填充值后如何手动更新值？

render() {
   return <div>
    <div className="row">
  <div className="form-group col-md-4">
<label>Name:<i><b>*</b></i></label>

<select className="form-control formControl" onChange={this.props.simplifiedFunction} id="ddlName" defaultValue={this.props.data[0].EmployeeID} >
{this.props.allNames}
</select>
</div> <div className="form-group col-md-4">
<label>Title:</label>
  <input className="form-control formControl" defaultValue={this.props.data[0].Title}
  value={this.props.data[0].Title} />
</div>
    <div className="form-group col-md-4">
    <label>Department:</label>
    <input className="form-control formControl" defaultValue={this.props.data[0].Department} 
     value={this.props.data[0].Department} />
</div>
</div>

Answer 1

要在设置值时输入更新值，必须设置onChange。

首先将您的特定道具置入状态。

示例状态：

state = { myname:'Bayat'}

示例输入：

<input  value={this.state.myname} onChange={e=>this.setState({myname:e.target.value})}/>

Answer 2

如果您正在使用setState（{}），您可能想将输入值绑定到状态而不是props？

类似的东西-

<input className="form-control formControl" defaultValue={this.props.data[0].Department} 
     value={this.state.department} />

重新渲染具有更新值的组件后，如何在输入和下拉菜单中更新值？

2 个答案: