如何在 ReactJS 中设置属性

Question

我有 2 个组件，一个称为 NodeWidget，另一个称为 PopupWidget。在 NodeWidget 中，它有一个分配给它的模型，如下所示：

PopupModel

export class PopupModel {
    question: string;
    model: string;

    constructor(question: string, model: string) {
        this.question = question;
        this.model = model;
    }
}

父组件是NodeWidget，它将Model传递给带有数据的PopupWidget。

NodeWidget

{ this.state.showComponent ?
    <PopupWidget model={this.props.popupModel} /> :
    null
}

最后在子组件中我们有这样的代码：

export interface PopupWidgetProps { 
    model: PopupModel;
}

export interface PopupWidgetState { }


export class PopupWidget extends React.Component<PopupWidgetProps, PopupWidgetState> {

    constructor(props: PopupWidgetProps) {
        super(props);

        this.state = { };

        this.handleClick = this.handleClick.bind(this);

    }

    handleClick() {
        console.log(this.props);
    }


    render() {        
        return (
            <div className="popup">
                <div className="popup_inner">
                    <h1>TEST</h1>
                    <input type="text" value={this.props.model.question} placeholder="Write a question..." />                   
                    <button onClick={this.handleClick}>close me</button>
                </div>
            </div>
        );
    }
}

我希望能够将输入的值绑定到模型，然后让它更新父组件中的原始模型，我这样做是否正确，因为它似乎不起作用。

Answer 1

您可以这样做以在按钮单击时将输入结果传递给父组件：

弹出小部件：

export class PopupWidget extends React.Component<PopupWidgetProps, PopupWidgetState> {
    constructor(props: PopupWidgetProps) {
        super(props);
        this.state = { question: '' };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.props.inputResult(this.state.question)
    }

    render() {        
        return (
            <div className="popup">
                <div className="popup_inner">
                    <h1>TEST</h1>
                    <input type="text" value={this.state.question} onChange={(question) => { this.setState({ question })}} placeholder="Write a question..." />                   
                    <button onClick={this.handleClick}>close me</button>
                </div>
            </div>
        );
    }
}

节点小部件：

constructor(props) {
   super(props);
   this.getInputResult = this.getInputResult.bind(this);
}
getInputResult(question) {
    this.props.inputResult(question);
    this.setState({ showComponent: false });
}
...
{ this.state.showComponent ?
    <PopupWidget inputResult={this.getInputResult} /> :
    null
}

最后在 PopupModel 中（我假设这是一个 react 组件，我不知道你是否可以在 react 中使用简单的 es6 类）：

export class PopupModel extends React.Component {

    constructor(props) {
        this.state = { question:  '', model: '' }; // set your initial state
        this.getInputResult = this.getInputResult.bind(this);
    }

    getInputResult(question) {
        this.setState({ question }); // here's our result from the input
    }
    render(){
        return(<NodeWidget inputResult={this.getInputResult} />);
    }
}

如果您在两者之间有多个必须通信的组件，这可能会很无聊。

您可以使用像 Redux 或 MobX 这样的 HOC 来处理可以在任何组件中传递的应用程序状态，并且任何组件都可以调度操作以更新应用程序状态，如果您有多个，则应该使用它像这样的情况。