一些与问题无关的提示

Question

我有一个父级组件，可保持点击状态：是否单击文件。

文件来自子组件。

我知道我可以从父级使用props和call函数，但是这样做，我得到了this.props.handleStateChange不是函数

    export class Parent extends Component {
        constructor(props) {
        super(props);
        this.state = {
            clickable: false
        };

        this.handleStateChange = this.handleStateChange.bind(this);
        }

        handleStateChange = (val) => {
            this.setState({ clickable: val })
        }

        render() {
            return (
                <Child handleStateChange={this.handleStateChange} />
            );
        }
    }

    class Child extends Component {
        constructor(props) {
            super(props);
            this.state = {
            clickable: false
            };
        }

        handleClick = () => {
            this.state.clickable ? this.setState({ clickable: false }) : 
            this.setState({ clickable: true });

            this.props.handleStateChange(this.state.clickable)
        }

        render() {
            return (
                <div className={this.state.clickable ? 'clickable' : null} 
                >
                    <img className="item" src={file} alt="file" onClick= 
                {this.handleClick} />
                </div>
            );
        }
    }

有什么想法我在那里想念什么吗？

Answer 1

Here一切正常，没有错误。

如果您在问题中添加的代码不是您正在使用的真实代码，请尝试检查拼写错误。

可能您传递的道具名称错误/不同。

一些与问题无关的提示

代替

this.state.clickable
  ? this.setState({ clickable: false })
  : this.setState({ clickable: true });

您应该

this.setState(prevState => ({clickable: !prevState.clickable}))

Answer 2

setState是异步的，因此不能保证在此之后立即使用新设置的状态。相反，请为handleClick尝试以下操作：

handleClick = () => {
    this.setState(prevState => {
        this.props.handleStateChange({ !prevState.clickable });
        return { clickable: !prevState.clickable };
    })
}

也就是说，您在父母和孩子中保持相同的状态。最好将其设置在父级（从孩子那里）并将其作为道具传递给孩子。

同样，由于您使用的是箭头函数，因此不需要bind构造函数中的任何函数。

从子组件更新父组件状态

2 个答案:

一些与问题无关的提示