使用更新值重新渲染组件后如何更新输入和下拉列表中的值？

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({})，您可能希望将输入值绑定到状态而不是道具？

像这样 -

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

使用更新值重新渲染组件后如何更新输入和下拉列表中的值？

How to update value in input and drop-down after re-rendering the component with updated value?

sharepoint

reactjs

spfx