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尝试在value prop内找到传递的值（来自options prop），如果失败则返回undefined。

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

您正在传递一个字符串＆＃34;一个＆＃34;，这在您的选项数组中不存在。

在您的情况下，

options[i][valueKey]将是字符串＆＃34; 1＆＃34;或＆＃34; 2＆＃34;。 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} />
        )
    }
}

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

1 个答案: