如何在不同的地方用唯一的ID使用一个类组件？

Posted 2021-03-19

我想在不同的地方使用Buttons组件，但不是作为一个连续的项目列表，我不能使用array.map方法，因为它会产生连续的组件列表。我想为每一个(值)保留一个'id'，这样我就可以识别它们。

class Buttons extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 0,

    };
    this.increase = this.increase.bind(this);
    this.decrease = this.decrease.bind(this);
  }

  increase(e) {
    e.preventDefault();
    if (this.state.value < 10) {
       return this.setState(() => ({ value: this.state.value + 1 }));

    } else return null;
  }
  decrease(e) {
    e.preventDefault();
    if (this.state.value !== 0) {
      return this.setState(() => ({ value: this.state.value - 1 }));
    } else return null;
  }
  render() {
    return (
      <div>
        <button onClick={this.decrease}>-</button>
        <label>{this.state.value}</label>
        <button onClick={this.increase}>+</button>
      </div>
    );
  }
}

我想使用如下组件

  <li>
       Adults <Buttons id={10} key={10} />
  </li>
  <li>
       Students <Buttons id={20} key={20} />
  </li>

答案

你可能想要这样的东西。

function MyComponent() {
  const [adults, setAdults]  = React.useState(0)
  const [students, setStudents]  = React.useState(0)

  render (
    <ul>
      <li>
        Adults <Buttons value={adults} onChange={setAdults} />
      </li>
      <li>
        Students <Buttons value={students} onChange={setStudents} />
      </li>
    </ul>
  )
}

function Button({ value, onChange }) {
  return (
    <div>
      <button onClick={() => onChange(value - 1)}>-</button>
      <label>{value}</label>
      <button onClick={() => onChange(value + 1)}>+</button>
    </div>
  )
}