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

UPD：

Answer 1

回调不等于异步！实际上，你确实改变了价值。然后它会被浏览器的重置事件处理程序重置。与上面的无反应演示相同。你可以这样工作：

using System;
using SFML;
using SFML.Window;
using SFML.Graphics;
using SFML.System;

namespace SFML_Test
{
    class Game
    {
        private RenderWindow _window;

        public void Display ()
        {
            _window = new RenderWindow(new VideoMode(800, 600), "SFML window");
            _window.SetVisible(true);
            _window.Closed += new EventHandler(OnClosed);
            while (_window.IsOpen)
            {
                _window.DispatchEvents();
                _window.Clear(Color.Red);
                _window.Display();
            }
        }

        private void OnClosed(object sender, EventArgs e)
        {
            _window.Close();
        }
    }
}

Answer 2

并不是选择选项的值不随refs改变，而是因为没有什么可以触发DOM更新，所以你无法看到更改。您应该在调用setState之前重置选择值，这不应该是一个问题，因为设置状态不依赖于下拉状态。

onReset(ev) {
    // First I update state. 
    // Both reset and DOM update will happen simultaneously with this approach
    this.country.value = this.props.user.country;
    this.role.value = this.props.user.role;

    this.setState((state, props) => {
        return {
            birthday: moment(this.props.user.birthday),
            error: null,
            foo: this.props.foo
        }
    });
}

如何在React中通过引用以编程方式设置选择值？

2 个答案: