Блог

Главная - Вопросы по программированию - Присвоение каждой кнопке собственного индивидуального количества состояний

Присвоение каждой кнопке собственного индивидуального количества состояний

#javascript #reactjs #react-props

#javascript #reactjs #реагировать-реквизит

Вопрос:

Приведенный ниже код показывает мой текущий дизайн компонента. Это компонент счетчика, который отвечает за увеличение счетчика для соответствующего элемента массива, а также за добавление выбранного элемента в корзину. Я пытаюсь выяснить, есть ли какой-то способ, которым я могу присвоить каждому элементу массива в массиве items его собственное значение количества состояний. В настоящее время на экране отображаются четыре элемента массива, рядом с каждым из которых есть кнопка, а также количество. При нажатии кнопки увеличения для любого конкретного элемента количество состояний для всех кнопок обновляется и отображается, а это не то, что я хочу. Я пытался назначить каждой кнопке собственное количество состояний несколькими способами, но не смог найти правильный способ. Я хотел бы каким-то образом привязать значение количества состояний к каждой кнопке, чтобы у каждой из них было свое индивидуальное количество состояний.Я был бы очень признателен, если бы кто-нибудь мог дать несколько советов или подсказок, поскольку я не знаю способа изолировать количество состояний для каждой кнопки и сделать его уникальным, чтобы при нажатии кнопки одного значения обновлялось только количество состояний для этой конкретной кнопки (расположенной рядом с кнопкой увеличения), ине другие.

 class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      cart: [],
    };
  }

  handleIncrement = (e) => {
    this.setState({
      count: this.state.count   1,
      cart: [...this.state.cart, e.target.value],
    });
  };

  render() {
    const listItems = this.props.items.map((item) => (
      <li key={item.id}>
        {item.value}
        <button onClick={this.handleIncrement}> </button>
        {this.state.count}
      </li>
    ));
    return (
      <div>
        {listItems}
      </div>
    );
  }
}

Ответ №1:

Что я здесь сделал, так это удалил constructor , обновил Counter реквизит компонента, обновил событие о том, как обновить корзину в Example компоненте, скорректировал Counter компонент для Cart компонента, который я добавил componentDidMount , и shouldComponentUpdate убедился, что компонент будет повторно отображаться только при listArray изменении реквизита. Вот код.

 class Example extends React.Component {
    state = {
        cart: [],
        items: [
            { id: 1, value: "L1" },
            { id: 2, value: "L2" },
            { id: 3, value: "L3" },
            { id: 4, value: "L4" }
        ]
    }

    render() {
        const { cart } = this.state

        return (
            <div>
                <h1>List</h1>
                { items.map(
                    ({ id, ...rest }) => (
                        <Counter
                            key={ id }
                            { ...rest }
                            cart={ cart }
                            onAddToCard={ this.handleAddCart }
                        />
                    )
                ) }
            </div>
        )
    }

    handleAddCart = (item) => {
        this.setState(({ items }) => ([ ...items, item ]))
    }
}

class Counter extends React.Component {
    state = {
        count: 0
    }

    handleIncrement = () => {
        this.setState(({ count }) => ({ count: count   }))
    }
    
    render() {
        const { count } = this.state
        const { cart, value } = this.props

        return (
            <div>
                { value }
                <span>
                    <button onClick={ this.handleIncrement }> </button>
                    { count }
                </span>
                <Cart listArray={ cart } />
            </div>
        )
    }
}

class Cart extends React.Component {
    state = {
        cart: []
    }

    addTo = () => (
        <div>List: </div>
    )

    componentDidMount() {
        const { cart } = this.props

        this.setState({ cart })
    }

    shouldComponentUpdate({ listArray }) {
        return listArray.length !== this.state.cart.length
    }

    render() {
        return (
            <div>
                <ListFunctions addClick={ this.addTo } />
            </div>
        )
    }
}

const ListFunctions = ({ addClick }) => (
    <div>
        <button onClick={ addClick }>Add To List</button>
    </div>
)

Ответ №2:

Если вы хотите добавить в список элементов без отображения кнопки, вы можете добавить пользовательское свойство, чтобы отметить, что это пользовательское добавление:

 class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, value: "L1" },
        { id: 2, value: "L2" },
        { id: 3, value: "L3" },
        { id: 4, value: "L4" },
      ]
    }
  }
  addToItems = items => {
    this.setState({
      items,
    });
  }
  render() {
    var cartArray = [];
    
    return (
      <div>
        <h1>List</h1>
        {this.state.items.map((item) =>
            <Counter
              key={item.id}
              value={item.value}
              id={item.id}
              custom={item.custom}
              cart={cartArray}
              addToItems={this.addToItems}
              items={this.state.items}
            />
        )}
      </div>
    );
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState({
      count: this.state.count   1,
    });
    this.props.cart.push(this.props.value);
  };
  addTo = () => {
    const { items } = this.props;
    let lastId = items.length;
    lastId  ;
    this.props.addToItems([
    ...items,
    {
      id: lastId,
      value: `L${lastId}`,
      custom: true,
    }]);
  };
  render() {
    return (
      <div>
        {this.props.value}
        {
          !this.props.custom amp;amp; 
          (
            <span>
              <button onClick={this.handleIncrement}>                  </button>
              {this.state.count}
            </span>
          )
        }
        <Cart addTo={this.addTo} />
      </div>
    );
  }
}
class Cart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
      return (
        <div>
          <ListFunctions
            addClick={this.props.addTo}
          />
        </div>
      );
    return null;
  }
}
const ListFunctions = ({ addClick}) => (
  <div>
    <button onClick={addClick}>Add To List</button>
  </div>
);

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>