无法获取输入 select 表单的初始值

Question

我在输入字段中使用 react-select。除了在单击后在输入中获取 selected 值外，一切正常。另外（如标题中所述）我无法看到 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 icon-clear）

Answer 1

阅读源代码后，我很确定您将错误的值传递给 value 属性。

expandValue 尝试在 options prop 中查找传递的值（来自 value prop），如果失败则 returns undefined.

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

您传递的字符串 "one" 不存在于您的选项数组中。

options[i][valueKey] 在您的例子中将是字符串“1”或“2”。 valueKey === 'value'，所以这是从您的选项的对象值属性中检索的（您在标签中有相同的值，所以我想强调这一点，因为它可能会造成混淆）。

更改值应该可以解决问题

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

回答您的评论问题：我不确定，但这对我来说看起来像是受控输入。您的 select 值位于 hidden input which uses the value from value 道具内。我想你必须这样做：

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} />
        )
    }
}

无法获取输入 select 表单的初始值

Cannot get initial value for the input select form

javascript

reactjs

react-select