ReactJS道具已更新，但字段不会重新渲染

ReactJS props are updated, but field is not re-rendered

本文关键字：新渲染 字段 已更新 ReactJS      更新时间：2024-05-09

我一直在玩React中的字段，但遇到了文本输入不更新（而属性更新）的问题。我曾尝试通过类/状态组件来实现，但没有成功。我有点希望能够制作出完全不在商店里的特定形式的组件。有人能给我指正确的方向吗？

import React from 'react';
export default (props) => {
    function editProjectNameChanged(event, syntheticEvent) {
        debugger;
        props.editProject.name = syntheticEvent.target.value;
    }
    return (
        <div className="col-xs-5 col-md-5">
            <form>
                <div className="form-group">
                    <label htmlFor="management-projects-name">Project name</label>
                    <input type="text" className="form-control" id="management-projects-name"
                           value={props.editProject.name}
                           onUserInput={editProjectNameChanged.bind(null, event)}
                           placeholder="Project name" />
                </div>
            </form>
        </div>
    );
}

提前谢谢。。整个形式的事情比我想象的要困难！

您不应该更改子对象中的道具。这对国家来说是一项好工作。更新props不是一个好主意，因为父组件不会被通知更改，并且状态更有用，因为当您调用setState（）时，组件会被重新绘制。类似的东西（我还没有测试过）

import React from 'react';
export class YourComponent extends React.Component{
    constructor(){
        this.state = {
            name: this.props.editProject.name
        };
    }

    editProjectNameChanged(event, syntheticEvent) {
        this.setState({
            name: syntheticEvent.target.value
        });
    }
    render(){
        return <div className="col-xs-5 col-md-5">
            <form>
                <div className="form-group">
                    <label htmlFor="management-projects-name">Project name</label>
                    <input type="text" className="form-control" id="management-projects-name"
                           value={props.editProject.name}
                           onUserInput={editProjectNameChanged.bind(this, event)}
                           placeholder="Project name" />
                </div>
            </form>
        </div>;
    }
}

您不应该像在组件中那样更改props。如果您不希望您的组件管理状态，那么它应该接受回调作为prop，它将在用户输入时调用该回调。然后，父组件将决定是否以及如何更新该值，并将其作为道具传递回组件。

<input value={ props.value } onChange={ e => props.onChange(e.target.value) } />

自0.13版本以来，直接更改props对象没有任何效果。您可以在这里找到解释为什么引入

的博客文章
相关文章：