Как установить значение по умолчанию для раскрывающегося списка в переменную состояния в Reactjs - PullRequest
Новая
       21

Как установить значение по умолчанию для раскрывающегося списка в переменную состояния в Reactjs

0 голосов
/ 12 января 2019

У меня есть компонент React, который содержит текстовое поле, раскрывающийся список и кнопку отправки.

Я фиксирую значения текстового поля и раскрывающегося списка, используя событие OnChange, следующим образом. 

<div className="form-group">
  <label htmlFor="accountName">Account Name</label>
  <input type="text" id="accountName" className="form-control" name="accountName" value={this.state.accountName} onChange={(e)=>this.change(e)}></input>
</div>
<div className="form-group">
  <label htmlFor="originatedBy">Originated By</label>
  <select className="form-control" id="originatedBy" name="originatedBy" value={this.state.originatedBy} onChange={(e)=>this.change(e)}>
    <option>value1</option>
    <option>value2</option>
    <option>value3</option>
  </select>
</div>
<div className="form-group row ml-md-1">
  <button type="submit" className="btn btn-outline-primary btn-block" onClick={(e)=>this.addRecord(e)}>Add Record</button>
</div>

А в разделе Js у меня есть 

class AddRecordView extends Component{

state={
      accountName:"",
      originatedBy:""
}

change(e){
    this.setState({[e.target.name]:e.target.value});
}

addRecord(e){
    e.preventDefault(e);
    const user={
          accountName : this.state.accountName,
          originatedBy : this.state.originatedBy,
    }

    console.log(user);
    var url = <url_of_the_endpoint>";
    axios.post(url, {
        user
    },{
        headers: {
            'Accept': 'application/json'
        }
    })
    .then(function(response){
        console.log(response);
    })
    .catch(function(error){
        console.log(error);
    });
}
render(){
    return(
        <html_section>
    );
}
}
export default AddRecordView;

Значения «accountName» и «originatedBy» просто устанавливаются при изменении текстового поля и выпадающего списка соответственно.

Однако, если я позволю значение по умолчанию (значение, которое показывает, когда форма загружена) раскрывающегося списка, остается неизменным и Отправить данные, оно не вызывает событие «OnChange» и передает, {accountName: 'some_value', originatedBy: ""} для серверной части.

Как мне сделать атрибут originatedBy так, чтобы он принимал значение по умолчанию из выпадающего списка. Пожалуйста, поделитесь своими идеями о том, как заставить это работать (возможно, от конструктора или любого другого подходящего метода).

Любые предложения будут полезны.

...