Question

我一直在玩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>
    );
}

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

Answer 1

你不应该改变孩子的道具。这对国家来说是一份好工作。更新道具不是一个好主意，因为父组件不会通知更改，并且状态更有用，因为当您调用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>;
    }

}

Answer 2

你不应该从组件中改变prop方式。如果您不希望组件管理状态，则它应该接受回调为<input value={ props.value } onChange={ e => props.onChange(e.target.value) } />，它将调用用户输入。然后，父组件将决定是否以及如何更新该值，并将其作为支柱传递回组件。

props

直接对{{1}}对象进行变换自版本0.13起无效。你可以在这里找到blog post explaining why this behaviour was introduced

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

2 个答案: