Question

这是我的SearchForm.js类 import＆＃39;的反应＆＃39 ;; 从＆＃39; react-dom＆＃39;中导入ReactDOM; 从＆＃39; axios＆＃39;中导入axios; class SearchForm扩展了React.Component { 构造函数（道具）{ 超（道具） this.state = { 位置：＆＃39;＆＃39;，地区：＆＃39;＆＃39;，日期：＆＃39;＆＃39;，经验：{ 类型：数组，默认值：function（）{return []} } } this.handlePositionChange = this.handlePositionChange.bind（this）; this.handlePositionKeyUp = this.handlePositionKeyUp.bind（this）; this.handleAreaChange = this.handleAreaChange.bind（this）; } ... render（）{ 回来（＆lt; form className =＆＃39;表单搜索表单＆＃39;的onSubmit = {this.handleSubmit}＆GT; ＆lt; div className =＆＃34; form-group col-md-2＆＃34;＆gt; ＆lt; label htmlFor =＆＃34;体验＆＃34;＆gt;经验＆lt; / label＆gt; ＆lt; select className =＆＃34; form-control＆＃34;名称=＆＃34;经验＆＃34; ID =＆＃34;经验＆＃34; onChange = {this.handleChange} value = {this.state.experience}＆gt; ＆lt; option key = {this.props.experience.id} value = {this.props.experience.name}＆gt; {} this.props.experience.name ＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆LT; /形式＆GT; ） } } 导出{SearchForm} 经验必须是包含字段id和name的多个数组，我需要在呈现表单之前从其他服务器获取其值并生成＆lt; option＆gt; ＆lt; select＆gt;的标签元素以前。但我不知道如何制作它。我使用axios在其他输入更改时发送AJAX请求，所以也许我可以在窗口加载或类似的东西上使用它？

Answer 1

componentDidMount生命周期功能是您需要向API请求的地方。初始渲染后调用componentDidMount

class SearchForm extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
      position: '',
      area: '',
      date: '',
      experience: {
           type: Array,
           default: function () { return [] }
          }  
      }

      this.handlePositionChange = this.handlePositionChange.bind(this);
      this.handlePositionKeyUp = this.handlePositionKeyUp.bind(this);  
      this.handleAreaChange = this.handleAreaChange.bind(this); 

    }

    componentDidMount() {
        //API request here
        APICall().then(res => {
           this.setState({data: res});
        })
    }
    ...

    render() {
        //conditional rendering here
        if(!this.state.data) {
            return 'Loading...'
        }
        return ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>

                <div className="form-group col-md-2">
                    <label htmlFor="experience">Experience</label>
                    <select className="form-control" name="experience" id="experience" onChange={this.handleChange} value={this.state.experience}>
                      <option key={this.props.experience.id} value={this.props.experience.name}>
                        {this.props.experience.name}
                    </option>
                    </select>
                  </div>

            </form>
        )
    }
}

export { SearchForm }

在渲染之前，React为<select>元素生成<option>标记

1 个答案: