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
}

然后最后在子Component中我们有了这段代码：

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

您可以执行此操作以在按钮单击时将输入结果传递给父组件：

PopupWidget：

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>
        );
    }
}

NodeWidget：

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中（我假设这是一个反应组件，我不知道你是否可以使用简单的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来处理可以在任何组件中传递的应用状态，并且任何组件都可以调度操作以更新应用状态，您应该使用它如果你有这样的多个案例。

如何在ReactJS中setProps

1 个答案: