Question

我对React JS还是陌生的，我目前正在为一个学校项目工作。这是一个团队的计分系统，共有4个团队。每个小组有5个孩子。现在，我创建了一个具有5个ID的数组。 5个计数器（数量）是为孩子准备的。我在laravel中使用React。我的代码：

export default class Gryffindor extends Component {
    constructor(props) {
        super(props);
        this.state = { counters: [] };
        this.fetchCounters = this.fetchCounters.bind(this);
        this.counterIncrement = this.counterIncrement.bind(this);
        this.counterDecrement = this.counterDecrement.bind(this);
    }

    componentDidMount() {
        this.fetchCounters();
    }

    fetchCounters() {
        const counters = [
            { id: 1, amount: 0 },
            { id: 2, amount: 0 },
            { id: 3, amount: 0 },
            { id: 4, amount: 0 },
            { id: 5, amount: 0 }
        ];
        this.setState({ counters });
    }

    counterIncrement(e) {}

    counterDecrement() {
        if (counters.amount > 0) {
            this.setState({ counters: amount - 5 });
        }
    }

    render() {
        return <CounterBody counters={this.state.counters} />;
    }
}

const CounterBody = ({ counters }) => (
    <table>
        <thead>
            <tr>
                <th />
                <th />
                <th />
            </tr>
        </thead>
        <tbody>
            {counters.map(counter => (
                <tr key={counter.id}>
                    <td>
                        <button onClick={this.counterDecrement}>Delete</button>
                    </td>
                    <td>{counter.amount}</td>
                    <td>
                        <button onClick={this.counterIncrement}>Add</button>
                    </td>
                </tr>
            ))}
        </tbody>
    </table>
);

if (document.getElementById("Gryffindor")) {
    ReactDOM.render(<Gryffindor />, document.getElementById("Gryffindor"));
}

我想做的是通过ID更新计数器中的金额。如您所见，我尝试为其创建函数，但是我不知道该怎么做。有人可以帮忙吗？

Answer 1

您无法通过子组件访问this.counterDecrement组件中的this.counterIncrement或Gryffindor。您需要将这些函数作为道具传递下来。

您可以将计数器索引传递给递增/递减函数，并使用该索引更新计数器的amount值。

您也可以将计数器直接置于您的状态，而不用在componentDidMount中对其进行更新。

示例

class Gryffindor extends React.Component {
  state = {
    counters: [
      { id: 1, amount: 0 },
      { id: 2, amount: 0 },
      { id: 3, amount: 0 },
      { id: 4, amount: 0 },
      { id: 5, amount: 0 }
    ]
  };

  counterIncrement = index => {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount + 1
      };
      return { counters };
    });
  };

  counterDecrement = index => {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount - 1
      };
      return { counters };
    });
  };

  render() {
    return (
      <CounterBody
        counters={this.state.counters}
        onDecrement={this.counterDecrement}
        onIncrement={this.counterIncrement}
      />
    );
  }
}

const CounterBody = ({ counters, onDecrement, onIncrement }) => (
  <table>
    <thead>
      <tr>
        <th />
        <th />
        <th />
      </tr>
    </thead>
    <tbody>
      {counters.map((counter, index) => (
        <tr key={counter.id}>
          <td>
            <button onClick={() => onDecrement(index)}>Delete</button>
          </td>
          <td>{counter.amount}</td>
          <td>
            <button onClick={() => onIncrement(index)}>Add</button>
          </td>
        </tr>
      ))}
    </tbody>
  </table>
);

ReactDOM.render(<Gryffindor />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

您应该像这样构造代码...这将使您清楚要求什么

class Gryffindor extends React.Component {
    constructor() {
      state = {
        counters: [
          { id: 1, amount: 0 },
          { id: 2, amount: 0 },
          { id: 3, amount: 0 },
          { id: 4, amount: 0 },
          { id: 5, amount: 0 }
        ]
      };

      this.counterIncrement = this.counterIncrement.bind(this);
      this.counterDecrement = this.counterDecrement.bind(this);
    }

  counterIncrement(index) {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount + 1
      };
      return { counters };
    });
  };

  counterDecrement(index) {
    this.setState(prevState => {
      const counters = [...prevState.counters];
      counters[index] = {
        ...counters[index],
        amount: counters[index].amount - 1
      };
      return { counters };
    });
  };

  render() {
    return (
      <CounterBody
        counters={this.state.counters}
        onDecrement={this.counterDecrement}
        onIncrement={this.counterIncrement}
      />
    );
  }
}

您的问题尚不清楚，但是要通过ID查找一个问题，您将遇到

deleteCertainCounter(e, passedInID) {
    this.setState({ counters: counters.filter(counter => counter.id !== passedInID) ]);
}

React JS如何更新数组中的值

2 个答案: