ReactJS的setState混淆与选择下拉

我在使用选择下拉列表时收到了React的setState中错误的响应。它给了我之前选择的选项的价值。当我第一次选择的东西出现为空白，但第二个选择会给我我之前选择的东西。ReactJS的setState混淆与选择下拉

所以，先挑：“绿色”的结果为空第二顺位：“红楼梦”给我“GRE”作为结果

我知道我失去了一些东西，也许我没有正确绑定它？

class Main extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      typeValue: '' 
     } 
    this.changeHandler = this.changeHandler; 
    this.expressValue = this.expressValue.bind(this); 
    } 

    expressValue(e) { 
     this.setState({ 
      typeValue : e.target.value 
     }); 
     console.log('this type val state is: ' + this.state.typeValue); 
    } 

    render() { 
     return (
      <div> 
       <TypeSelect changeHandler={this.expressValue} /> 
      </div> 
     ) 
    } 
}; 

class TypeSelect extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     let options = { 
      'default': 'Choose a category', 
      'red': 'Red', 
      'blu': 'Blue', 
      'gre': 'Green', 
     } 
     return (
      <select name="name_type" id="name_type" onChange={this.props.changeHandler}> 
      { 
        Object.keys(options).map(function(key){ 
        return (
         <option key={key} value={key}>{options[key]}</option> 
        ) 
       }) 
       } 
      </select> 
    ) 
    } 
};

来源

2017-05-11 SVY

this.setState()异步改变状态。这意味着，价值将会发生一点变化。通常在组合更新后在state上中继时，这不是问题。但是，你正试图立即获得新的价值。这是行不通的，因为目前你在state中还没有这个值。在你的特定情况下有两种方法。

第一路。在expressValue功能使用您的起源值，而不是状态值：

expressValue(e) { 
    this.setState({ 
     typeValue : e.target.value 
    }); 
    console.log('this type val state is: ' + e.target.value); 
}

方式二。在更新组件后显示消息，例如，在render方法中，每当state发生更改时都会调用。

render() { 
    console.log('this type val state is: ' + this.state.typeValue); 
    return (
     <div> 
      <TypeSelect changeHandler={this.expressValue} /> 
     </div> 
    ) 
}

来源

2017-05-11 21:40:00

罗马人这样做是正确的，但我也想点别的东西了：

this.changeHandler没有在主定义的反应成分。即使是这样，你也没有将它绑定到（this）。

在你的构造，更改行：

this.changeHandler = this.changeHandler;

到：

this.changeHandler = this.changeHandler.bind(this);

，然后你会用这个名字像你一样expressValue定义函数（）。

来源

2017-05-11 21:46:10

绑定'changeHandler'给了我一个'Uncaught TypeError：无法读取未定义的属性'绑定'的错误。 – SVY

它会在您编写函数时定义。所以上面的expressValue（e）{...，如果你写'changeHandler（e）{console.log（e）};'，this.changeHandler将不再是未定义的。 –

对不起，但我没有看到该组件中的这个功能，也没有在任何地方看到它的用法。你可以删除这一行，这是没用的。 –

ReactJS的setState混淆与选择下拉

回答

相关问题