Question

因此，我是React的新手，我正在尝试将卡的状态动态设置为“选定”或不设置为“选定”。我有从儿童->父级开始的点击事件。但是，当它进入父级时，我似乎无法使其动态地分配给状态（因为我可能不知道有多少张卡，我显然不想对此进行硬编码）。

这是我的方法：

handleCardClick(card) {
    let title = card.title;

    this.setState((preState, props) => ({
        title: true
    }));

    console.log('card: ', this.state);
}

我知道我还没有使用preState和props，但是稍后我将需要它们。

如何使状态保留实际标题而不是文字字符串“ title”？

因此，代替{title: true}的是{some_title: true}

我也在VS Code中得到警告，标题已分配但从未使用过。我这不是最好的方法吗？显然，我不希望每次我做这样的事情都会发出警告。

Answer 1

您可以使用方括号表示法设置动态键，

此外，在类属性中使用箭头函数可避免绑定this.handleCardClick = this.handleCardClick.bind(this)。

handleCardClick = ({ title }) => {       // <-- No binding required.
    this.setState((preState, props) => ({
        [title]: true                    // Dynamic key
    }));
}

并在您的ParentCard中：

cardAction = () => {
  if (this.state.myCard1 === true) {
     // ... do some action
  {
}

Answer 2

您可以使用方括号符号从这样的变量中设置属性

handleCardClick(card) {

    this.setState((preState, props) => ({
        [card.title]: true
    }));
}

在状态下使用方法args进行反应

2 个答案: