Question

我有一个父组件和一个子组件

export default class CityPart extends Component {
    constructor(props)
    {
        super(props);
        this.state ={
            citylist: citylist
            selectedflag:1
        }

    }
    Clickme(idd){
     this.setstate({selectedflag:idd})
}
    render() {
        return (
        <div className="CityPartMain">
            {this.state.citylist.map((item)=>{
                return (
                <EachCity name ={item.name} key={item.id}
                id={item.id}
                selected={this.state.selected}
                Clickme ={this.Clickme}
                />
                )
            })}
        </div>
        );

    }
}

export default class EachCity extends Component { 
    render() {
        const {name,id,selected,Clickme} = this.props;    
        return (
            <button 
            onClick={this.Clickme(id)}
            className={selected===parseInt(id,10)?"selectedcity": "EachCityMain"}>
            <p>{name}</p>
            </button>
        );
    }
}

每当我单击按钮时，我都希望该ID出现在我的父组件中，并且应该在父状态的selectedflag中更新。

谢谢您的帮助。

Answer 1

您犯了两个错误。第一个是在您的父母中-这就是您应如何实现方法<ConsoleApp1.Settings> <setting name="TestSetting" serializeAs="String"> <value>Hello</value> </setting> </ConsoleApp1.Settings>的方法：

Clickme

在您的实现中，Clickme = (id) => { this.setState({selectedflag:idd}) }表示对象，它正在调用方法（子级），因此this将对子级有效。当您使用lambda表达式时，它将适用于父级。

第二个错误是您如何在子组件中调用this.setState()。您应该像这样：

Clickme

如果要调用不带参数的函数，则可以将函数传递给<button onClick={() => Clickme(id)} className={selected === parseInt(id,10) ? "selectedcity" : "EachCityMain"} > <p>{name}</p> </button>。在您的情况下，您必须创建匿名函数以使用参数进行调用。另外onClick是不必要的。

Answer 2

您的Clickme回调将立即被调用（记住，此时将调用function（）），而您只是将该调用的结果存储在onClick处理程序中。您还使用了this。尝试改用匿名箭头功能将其设置为回调。

export default class EachCity extends Component { 
  render() {
    const { name, id, selected, Clickme} = this.props;    
    return (
      <button 
        onClick={() => Clickme(id)}
        className={selected===parseInt(id,10) ? "selectedcity" : "EachCityMain"}
      >
        <p>{name}</p>
      </button>
    );
  }
}

如果您不清楚这是什么以及它如何工作以及为什么起作用，那么我可以添加一个更详细的codeandbox示例。

更改子组件的状态

2 个答案: