setState,带有<select>选项,值为对象

Question

我有一个组件,呈现一个像这样的选择元素:

<select 
    name="directoryAttributes"
    id="dirSelect"
    className="form-control"
    onChange={this._handleChange}>
    {
        attributes.map(attribute => {
            return (
                <option
                    value={attribute}
                    key={attribute.directoryAttributesNo}
                >{attribute.label}</option>
            );
        })
    }
</select>

attribute是一个带有一些键/值的普通对象.我想调用handleChange将我的组件状态设置为该选项值(即属性对象).这是我的handleChange

_handleChange(e) {
    e.preventDefault();
    const element = e.target;
    const stateObject = {};

    stateObject[element.name] = element.value;
    this.setState(stateObject);
}

问题是,它似乎设置状态directoryAttributes为[object Object].为什么会发生这种情况,是一种反应的怪癖还是一些缺失的东西？

提前致谢!

编辑:对象的属性数组来自状态,只是为了澄清

Answer 1

问题是您无法将对象设置为选择选项的值.该值将设置为字符串值[object Object].

你可以做的是根据id查找你的属性.