无法获得输入选择表单的初始值

我正在使用react-select作为我的输入字段。除了在点击后在输入内获取选定值之外，一切都可以正常工作。另外（正如标题中提到的），虽然在代码中设置了，但我无法看到在选择字段中弹出的初始值。无法获得输入选择表单的初始值

render(){ 
    var Select = require('react-select'); 
    var options = [ 
     { value: '1', label: '1' }, 
     { value: '2', label: '2' } 
    ]; 

    function logChange(val) { 
     console.log(val); 
    } 
    return(

     <Select 
      name="form-field-name" 
      value="one" 
      options={options} 
      onChange={logChange} 
     /> 

    );

所有的事件工作正常（我可以看到，然后在我的console.log但没有任何改变在屏幕上）。

这里是的console.log和渲染（null是因为X图标清晰的）

来源

2017-03-17 eugene_sunic

你忘了添加此关键字'的onChange = {this.logChange}'。进一步看看这个例子https://github.com/JedWatson/react-select/blob/master/examples/src/components/States.js – DroidNoob

，只是恶化的东西...没有必要...没有任何显示当添加这个前缀时，在控制台中启动 –

阅读源代码之后，我敢肯定你是路过的错误的价值进入value道具。

expandValue试图找到在options prop内传递的值（从value prop），如果失败则返回undefined。

for (var i = 0; i < options.length; i++) { 
    if (options[i][valueKey] === value) return options[i]; 
}

你传入一个字符串“一个”，这是不存在于你的选择阵列。

options[i][valueKey]你的情况可能是字符串“1”或“2”。 valueKey === 'value'，所以这是从你的选项的对象值属性中检索的（你在标签内有相同的值，所以我想强调一下，因为它可能会令人困惑）。

更改值应该做的伎俩

<Select 
    name="form-field-name" 
    value="1" 
    options={options} 
    onChange={logChange} />

回答您的评论的问题：我不知道，但这个貌似控制输入给我。您的选择值位于hidden input之内，该值使用value prop中的值。我认为你必须做这样的事情：

class MySelect extends React.Component { 

    constructor(props) { 
     super(props) 

     this.state = { 
      value: "1" 
     } 

     this.handleChange.bind(this) 
    } 

    handleChange(selectedValue) { 
     this.setState({ value: selectedValue }) 
    } 

    render() { 
     return (
      <Select 
       name="form-field-name" 
       value={this.state.value} 
       options={options} 
       onChange={this.handleChange} /> 
     ) 
    } 
}

来源

2017-03-17 08:55:21

我已经得到了我的初始值，tnx，但是当我点击它时该值仍然不会改变应该在我的logChange方法上添加参数吗？ –

它看起来像我控制的组件（https://facebook.github.io/react/docs/forms.html#controlled-components）。我认为onChange函数可以让你设置你应该使用的状态值。 –

Tnx男人。我认为反应选择会为我做所有事情。但它似乎没有.. –

无法获得输入选择表单的初始值

回答

相关问题