Question

我有一个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'，origindBy：“”}到后端。

如何使'originatedBy'属性采用下拉列表的默认值。请分享您有关如何使其工作的想法（可能来自构造函数或任何其他合适的方法）。

任何建议都会有所帮助。

如何在Reactjs中将下拉列表的默认值设置为状态变量

0 个答案: