Как обновить значение при вводе и раскрытии после повторного рендеринга компонента с обновленным значением? - PullRequest
Новая
       6

Как обновить значение при вводе и раскрытии после повторного рендеринга компонента с обновленным значением?

0 голосов
/ 25 апреля 2019

У меня есть форма, в которой у меня есть несколько текстовых полей и выпадающих. Я перерисовываю этот компонент формы при изменении выпадающего значения новыми значениями. Это повторный рендеринг нормально со значениями обновления, но я не могу изменить значения вручную из текстовых полей или раскрывающегося списка. Как я могу обновить значение вручную после предварительного заполнения значений? 

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>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

Если вы используете setState ({}), вы, вероятно, хотите связать входное значение с состоянием, а не с реквизитом?

Как то так - 

<input className="form-control formControl" defaultValue={this.props.data[0].Department} 
     value={this.state.department} />
0 голосов
/ 25 апреля 2019

Для обновления значения на входе, когда вы устанавливаете значение, вы должны установить onChange.

Сначала приведите ваши конкретные реквизиты в состояние.

Пример состояния: 

state = { myname:'Bayat'}

Пример ввода: 

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