ReactJS，使用渲染按钮增加/减少渲染值

Question

我将如何访问表中的上一个单元格以增加/减小其值。 我有一个包含三个单元格的表格（运动，重复，编辑）。 编辑单元格包含减号和加号按钮，用于减少/增加当前行中前一单元格的重复量。 有关如何解决此问题的任何建议。 我正在使用React。

工作，固定代码：

class GeneratedWorkout extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      randomReps: Array(this.props.workouts.length)
        .fill()
        .map(() => Math.floor(Math.random() * 11) + 5)
    };
  }

  decreaseReps = index => {
    this.setState(prevState => {
      const randomReps = prevState.randomReps.slice();
      randomReps[index] = randomReps[index] - 1;
      return { randomReps };
    });
  };

  increaseReps = index => {
    this.setState(prevState => {
      const randomReps = prevState.randomReps.slice();
      randomReps[index] = randomReps[index] + 1;
      return { randomReps };
    });
  };

  renderRows = () => {
    return this.props.workouts.map((item, index) => {
      return (
        <Table.Row key={item.name}>
          <Table.Cell>{item.name}</Table.Cell>
          <Table.Cell>{this.state.randomReps[index]}</Table.Cell>
          <Table.Cell>
            <Button.Group compact size="mini">
              <Button onClick={() => this.decreaseReps(index)} icon="minus" />;
              <Button onClick={() => this.increaseReps(index)} icon="plus" />;
            </Button.Group>
          </Table.Cell>
        </Table.Row>
      );
    });
  };

  render() {
    return (
      <React.Fragment>
        <Table basic="very" unstackable selectable celled fixed compact>
          <Table.Header>
            <Table.Row textAlign="center">
              <Table.HeaderCell width={9}>Exercise</Table.HeaderCell>
              <Table.HeaderCell width={3}>Reps</Table.HeaderCell>
              <Table.HeaderCell width={4}>Edit</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>{this.renderRows()}</Table.Body>
        </Table>
        <br /> <br />
      </React.Fragment>
    );
  }
}

原始代码：

class GeneratedWorkout extends React.PureComponent {
  renderDecreaseButton = () => {
    return <Button onClick={() => this.decreaseReps()} icon="minus" />;
  };

  renderIncreaseButton = () => {
    return <Button onClick={() => this.increaseReps()} icon="plus" />;
  };

  generateReps = () => Math.floor(Math.random() * 11) + 5;

  decreaseReps = () => console.log("decrease");
  increaseReps = () => console.log("increase");

  renderRows = () => {
    return this.props.workouts.map(item => {
      return (
        <Table.Row key={item.name}>
          <Table.Cell>{item.name}</Table.Cell>
          <Table.Cell>{this.generateReps()}</Table.Cell>
          <Table.Cell>
            <Button.Group compact size="mini">
              {this.renderDecreaseButton()}
              {this.renderIncreaseButton()}
            </Button.Group>
          </Table.Cell>
        </Table.Row>
      );
    });
  };

  render() {
    return (
      <Table basic="very" unstackable selectable celled fixed compact>
        <Table.Header>
          <Table.Row textAlign="center">
            <Table.HeaderCell width={9}>Exercise</Table.HeaderCell>
            <Table.HeaderCell width={3}>Reps</Table.HeaderCell>
            <Table.HeaderCell width={4}>Edit</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>{this.renderRows()}</Table.Body>
      </Table>
    );
  }
}

Answer 1

仍然想知道如何使用适当的按钮定位适当的行。

您可以让按钮将另一个参数传递给回调，该参数确定例如列的索引：

class GeneratedWorkout extends React.PureComponent {

    state = {
        // init state from props
        reps: Array(this.props.workouts.length).fill(Math.floor(Math.random() * 11) + 5),
    };

    decreaseReps = index => {
        this.setState(prevState => {
            const reps = prevState.reps.slice();
            reps[index] = reps[index] - 1;
            return {reps};
        });
    }

    increaseReps = index => {/* implement accordingly */}

    renderRows = () => {
        return this.props.workouts.map((item, index) => {
            return (
                <Table.Row key={item.name}>
                    <Table.Cell>{item.name}</Table.Cell>
                    <Table.Cell>{this.state.reps[index]}</Table.Cell>
                    <Table.Cell>
                        <Button.Group compact size="mini">
                            <Button onClick={() => this.decreaseReps(index)} icon="minus" />;
                            <Button onClick={() => this.increaseReps(index)} icon="plus" />;
                        </Button.Group>
                    </Table.Cell>
                </Table.Row>
             );
        });
    };
}

Answer 2

我不确定这是否是解决方案，但是我会编写另一个类来完成工作，使用状态重新设置更新后的值。 希望有用

class GeneratedWorkout extends React.PureComponent {

  render(){
    var workouts = [];
    this.props.workouts.forEach((workout) => { workouts.push(<Workout workout={workout} key={workout.name} />);});
    return(
     <Table basic="very" unstackable selectable celled fixed compact>
        <Table.Header>
          <Table.Row textAlign="center">
            <Table.HeaderCell width={9}>Exercise</Table.HeaderCell>
            <Table.HeaderCell width={3}>Reps</Table.HeaderCell>
            <Table.HeaderCell width={4}>Edit</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
           {workouts}
    </Table.Body>
      </Table>
);
  }
}

class Workout extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
        value : 0
     }
     this.addOne = this.addOne.bind(this);
     this.subOne = this.subOne.bind(this);
  }
  componentDidMount(){
     var value = Math.floor(Math.random() * 11) + 5;
     this.setState({value: value});
  } 
  addOne(){
    var value = this.state.value +1;
    this.setState({value: value});
  }
  subOne(){
    var value = this.state.value -1;
    this.setState({value: value});
  }

  render(){
      return (
        <Table.Row>
          <Table.Cell>this.props.workout.name}</Table.Cell>
          <Table.Cell>{this.state.value}</Table.Cell>
          <Table.Cell>
            <Button.Group compact size="mini">
        <Button onClick={this.subOne} icon="minus" />
        <Button onClick={this.addOne} icon="plus" />
            </Button.Group>
          </Table.Cell>
        </Table.Row>
      );
  }
}