在 React 中向子组件传播事件

Question

我想将事件发送给我的 React 孩子。

我觉得这是一件很容易的事情，所以也许我只是有一个心理障碍，并且有一些明显的东西在盯着我看。

无论如何，我有一个小测试应用程序来说明问题：

export class Test extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        let {buttonClicked, textFieldChanged} = this.state
        return (
            <div>
                <button onClick={()=>this.handleClick()}>
                    Click
                </button>
                <input type={"text"} onChange={()=>this.handleTextChange()}/>
                <Inner buttonClicked={buttonClicked} textFieldChanged={textFieldChanged}/>
            </div>
        );
    }

    handleClick(e) {
        this.setState({ buttonClicked: true })
    }

    handleTextChange(e) {
        this.setState({textFieldChanged:true})
    }
}


class Inner extends React.Component {
    render() {
        let {buttonClicked, textFieldChanged} = this.props;
        return (
            <React.Fragment>
                <div>Clicked : {buttonClicked ? "CLICKED!" : " "}</div>
                <div>Text input : {textFieldChanged ? "TYPED!" : " "}</div>
            </React.Fragment>
        );
    }
}

一个按钮和一个文本字段位于父级中。 这两个小部件都可以触发事件并更改子组件。

这可以通过将 state 值作为属性传递给子级来简单地实现。 很容易的东西。

但是我想要一个非此即彼的情况。 当我单击按钮时，这会删除文本事件，反之亦然。 IE。 我不想看到这样的情况：

现在有一个非常明显的方法来解决这个问题，将 state 值更改为另一个值的“假”。

handleClick(e) {
    this.setState({ buttonClicked: true, textFieldChanged: false })
}

handleTextChange(e) {
    this.setState({textFieldChanged:true, buttonClicked: false})
}

有没有其他方法可以做到这一点？

问题是我的组件中有很多甚至很多处理程序，我不想否定其他值的其他 state 属性。

Answer 1

如果我理解正确，只需一个 function 将有所帮助 - 将属性名称传递给它

handleClick(propName) {
    this.setState({ 
        ...this.state,
        [propName]: !this.state[propName]
    })
}

Answer 2

在父组件 state 中创建属性 lastEventType，无论何时单击或键入 - 更新它。 并且仅将此属性传递给内部组件