选择默认值被状态覆盖答案

【问题标题】：Select default value is being overridden by state选择默认值被状态覆盖
【发布时间】：2019-05-30 03:04:37
【问题描述】：

我目前遇到的问题是我的选择下拉默认值被状态覆盖。我可能缺少一些简单的东西，但是谁能告诉我我做错了什么？

单击按钮时，我想提交表单，但在我更改之前不会获取状态第一个值？

如果我不清楚或需要任何其他信息，请告诉我。

谢谢！

//Wrapping container containing the state
class ActionsSegment extends Component {    
    constructor(props) {
        super(props);
        this.state = { value: '' };
    
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
    
      handleChange = (event) => {
        this.setState({value: event.target.value});
        console.log(event.target.value);
      }

    
      handleSubmit(event) {
        console.log((`State passed is: ${this.state.value}`));
        event.preventDefault();
      }
      
      render() {
          const { select, selectLabelTitle } = this.props;
          return (
            <form className="actions-segment" onSubmit={this.handleSubmit}>        
                <FormSelect 
                    select={select}
                    selectLabelTitle={selectLabelTitle}
                    handleChange={this.handleChange}
                    value={this.state.value}
                />
            </form>
        )
    }
}

export default ActionsSegment;


//Component containing the select dropdown
<select className="form-select form__flavour-dropdown" onChange={handleChange}>
      {
        select.map((type, index) => (
          <option value={type.title} key={index}>{type.title}</option>
        ))
      }
    </select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

fyi，在使用 ES6 箭头函数（在构造函数中）时，您不需要绑定 this，因为它不会创建新的上下文。更改 handleSubmit 就像您编写 handleChange 函数一样，然后删除 .bind 语句，以使您的示例更清晰。关于您的问题：您的代码看起来不错，您指的是什么按钮？
你有没有考虑在选择标签上放一个值属性？
@dschu 我没有在这个例子中包含它只是为了缩短它并获得我认为需要的位:)
@nubinub 我试过了，但它被国家删除了:(
我的意思是<select value={this.props.value} ...

标签： reactjs state

【解决方案1】：

您可以使用所需的任何道具值初始化您的选择值：

this.state = { value: this.props.whatEverPropsYouLike }

或者在你的情况下可能是这样的：

this.state = { value: this.props.select[0].title }

【讨论】：