Question

我正在做一个非常简单的＆＃34;喜欢＆＃34;应用程序，你有一些图片，每个图片下面都有一个按钮，当你点击相似按钮时，它增加1，目前一切都是硬编码。

我在主文件中写了3个相同的组件

 <Test number="5" key="0" get={this.testing} > (this 3 times with a picture Img between them)



state = {
   data: [
      {counter: 0, Alt: "Pengo"},
      {counter: 0, Alt: "Zebra"},
      {counter: 0, Alt: "Kuma"},
      ]
  }

如何制作该功能，该功能将采用测试编号属性（这3个测试将具有3个不同的编号）并将其设置为1？（也就是说，在状态下的反击将增加1，这取决于我按下哪个测试按钮。如果我在测试中用3号按下类似按钮，它将找到该测试的计数器并增加它1）

感谢您的时间。

Answer 1

您需要传回所单击任务的数量/索引，然后更新Parent中的状态。

父：

class App extends React.Component {
  state = {
    data: [
      { counter: 0, Alt: "Pengo" },
      { counter: 0, Alt: "Zebra" },
      { counter: 0, Alt: "Kuma" },
    ]
  }
  testing = (number) => {
    const no = Number(number);
    const data = [...this.state.data];
    data[no].counter++;
    this.setState({data});
  }
  render() {
    return (
  <div style={styles}>
    <Test number="0" key="0" get={this.testing} data={this.state.data} />
    <Test number="1" key="1" get={this.testing} data={this.state.data} />
    <Test number="2" key="2" get={this.testing} data={this.state.data} />
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
  </div>
);
  }
}

任务：

export default class Tasks extends React.Component {

  increment = () => {
    this.props.get(this.props.number);
  }
  render() {
    const { number, data } = this.props;
    return (
      <div>
        <div>{data[Number(number)].counter}</div>
        <button onClick={this.increment}>Increment</button>
      </div>
    )
  }
}

<强> Sample working codesandbox

如何在我的情况下正确更改setState

1 个答案: