Question

我使用React，Redux＆amp; amp;创建了一个应用程序。反应路由器。当URL更改时，应使用查询参数personId的值从数组中获取正确的person对象：

mapStateToProps = (state, router) => ({
    onePerson: state.persons.filter((person, i) => person.id === router.params.personId)[0]
})

我还有一个取决于该人姓名的输入元素：

<input type="text" defaultValue={this.props.onePerson.name} />

随着网址的更改，props会相应更新，输入元素的defaultValue不会更改。我怎样才能克服这个问题？请注意，我不想使用“受控输入”。

Answer 1

这是因为defaultValue仅在第一次使用时才会使用。如果以后需要更新该值，则必须使用受控输入。

更新：

来自React Docs：

defaultValue和defaultChecked道具仅在初始时使用渲染。如果需要更新后续渲染中的值，则为将需要使用受控组件。

我猜你可以删除并重新添加该组件，以便为其提供新的defaultValue，，但你真的不应该。

Answer 2

我发现很容易破坏一个元素，清理所有数据并用新的数据替换它：

ReactDOM.unmountComponentAtNode(document.querySelector("#myParentElement"));

        if(document.querySelector("#myParentElement")){
            ReactDOM.render(
                <MyComponent name={name}  />,
                document.querySelector("#myParentElement")
            );
        };

您也可以使用此版本的卸载方法：

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);

React输入defaultValue不会更新道具更改

2 个答案: