0

我正在为我的输入字段使用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 icon-clear）

在此处输入图像描述

4

1 回答 1

1

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

expandValue尝试在value prop内部找到传递的值（来自 ）options 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} />

回答您的评论问题：我不确定，但这对我来说似乎是受控输入。您的选择值位于隐藏输入中，该输入使用来自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-17T08:55:21.693 回答