javascript - 无法获取输入选择表单的初始值

Question

我在输入字段中使用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图标清晰)

Answer 1

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

expandValue尝试在 options prop 中查找传递的值(来自 value prop)，如果失败，则返回 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} />

回答您的评论问题:我不确定，但这对我来说看起来像是受控输入。您选择的值位于 hidden input 内它使用 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} />
        )
    }
}