Question

尝试使用参数更改组件的本地状态时遇到一些问题。

这是我的代码：

class App extends Component {
  state = {
    startup: '',
    investor: '',
    realState: '',
    ecoProject: '',
  };

  handleChangeCardSelection = async (e, stateValue, otherCards) => {
    const currentCard = await e.currentTarget.id;

    this.setState({
      [stateValue]: currentCard,
      [otherCards]: '',
    });
  };

  render() {

   const { startup, investor, realState, ecoProject } = this.state;

   return(
     <Card
        id="investor"                  
        onClick={e => this.handleChangeCardSelection(e, [investor])} />
   )
  }
}

所以，基本上我不想为状态中的每个项目创建一个新功能。

我只想调用this.handleChangeCardSelection函数，然后设置想要的项目的值，并为状态中的其他值设置空字符串。

就像上面的代码一样，我需要做类似的事情：

this.setState({
    investor: 'investor' // or any other value to fill the string
    startup: '',
    realState: '',
    ecoProject: '',
  })

现在，我从点击调用的函数中得到的是这种状态：

"": "investor"
ecoProject: ""
investor: ""
realState: ""
startup: ""
undefined: ""

我想念什么？

Answer 1

将[investor]更改为investor

onClick={e => this.handleChangeCardSelection(e, investor)} />

Answer 2

您没有正确将参数传递给函数。传递给函数时，您无需在[]中包装参数

<Card
    id="investor"                  
    onClick={e => this.handleChangeCardSelection(e, investor)} />

如何使用参数更改组件的本地状态？

2 个答案: