javascript - 如何通过 refs 以编程方式在 React 中设置选定的值？

Question

这是我如何使用纯 JS 设置选择。简单、简单、有效:

<select id="mySelect">
    <option value="1">1<option>
    <option value="2">2<option>
</select>

$("#mySelect").value = '1'

不适用于 React。由于某种原因，这种方法在 React 中不起作用。选择值不会更新。为什么？在 React 中我该怎么做？

我有一个普通的 DOM <form>与 [reset]按钮。单击reset默认浏览器行为是清除所有表单字段。为什么我不能在它后面设置选择？

onReset(ev) {
    // First I update state. 
    // And AFTER the DOM has been updated, 
    // I want to set selects programatically using refs
    this.setState((state, props) => {
        return {
            birthday: moment(this.props.user.birthday),
            error: null,
            foo: this.props.foo
        }
    }, () => {

        // These both approaches do not work! Why?
        this.country.value = this.props.user.country;
        this.role.value = this.props.user.role;

        ReactDOM.findDOMNode(this.country).value = this.props.user.country;
        ReactDOM.findDOMNode(this.role).value = this.props.user.role;
    });
}

render() {
    return (
        <form action="" onReset={ (ev)=> { this.onReset(ev) } }>

            <select id="country" ref={ node => this.country = node } defaultValue={this.props.user.country}>
                <option value="us">USA<option>
                <option value="ca">Canada<option>
            </select>

            <select id="role" ref={ node => this.role = node } defaultValue={this.props.user.role}>
                <option value="admin">Admin<option>
                <option value="user">User<option>
            </select>

            <botton type={'reset'}>
        </form>
    )
}

我知道我可以使用受控组件来做到这一点。请不要建议它，因为我需要上面的方法，我有一个相当大的表单，当每个字段都是受控字段时，它的渲染速度很慢。

这是我原来的问题https://github.com/facebook/react/issues/12422

更新:

Answer 1

回调不等于异步!事实上，你确实改变了这个值。然后它就会被浏览器的重置事件处理程序重置。与上面的无 react 演示相同。你可以这样让它工作:

this.setState((state, props) => {
    return {
        birthday: moment(this.props.user.birthday),
        error: null,
        foo: this.props.foo
    }
}, () => {
   // make it asynchronous
    setTimeout(() => { 
      this.country.value = this.props.user.country;
      this.role.value = this.props.user.role;
    }, 0)    
});