亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

更新狀態上的每個項目單擊事件

更新狀態上的每個項目單擊事件

智慧大石 2022-09-02 10:31:32
我正在嘗試通過單擊按鈕來更新狀態中的每個項目。每個項目的初始狀態為 FALSE(isSelected),如果用戶在按鈕類 div 上執行 onClick 事件,則應將當前項目的狀態(isSelected)更新為 TRUE,但我不知道如何完成此操作。已編輯:每次單擊應僅更新一個項目,例如,如果我點擊按鈕,它應該將狀態更改為僅ID: 1firsItemisSelectedtrueID: 1這是我的代碼的一個例子(我認為它應該如何)import React, { Component } from 'react'export default class List extends Component {  constructor(props) {    super(props);    this.state = {      listItems: [{        name: 'firstItem',        itemOptionSelector: [{          id: 1,          isSelected: false        },        {          id: 2,          isSelected: false        },        {          id: 3,          isSelected: false        },        ]      },      {        name: 'secondItem',        itemOptionSelector: [{          id: 1,          isSelected: false        },        {          id: 2,          isSelected: false        },        {          id: 3,          isSelected: false        },        ]      }      ]    }  }  selectItemClickHandler = () => {    this.setState({      listItems: [{itemOptionSelector: [{isSelected: true}]}]    })  }  render() {    const {listItems} = this.state    return (      <div>        {listItems.map(item => {          <div className="button" onClick={this.selectItemClickHandler}>{item.name}</div>        })}      </div>    )  }}
查看完整描述

3 回答

?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

請查看此完整示例?;旧希趩螕籼幚沓绦蛏显O置狀態時遇到了問題。


selectItemClickHandler = () => {

    this.setState({

      listItems: [{itemOptionSelector: [{isSelected: true}]}]

    })

  }

selectItemClickHandler 的更新代碼應為:


selectItemClickHandler = (event, index) => {

        this.setState(prevState => {

            const list = [];

            prevState.listItems.map((item, i) => {

                if (i === index) {

                    item.itemOptionSelector.map(selector => {

                        selector.isSelected = true

                    })

                }

                list.push(item);

            });

            return {

                listItems: list

            };

        });

    };

以下是我更改上述代碼的完整示例


import React, {Component} from 'react'


export default class ListExample extends Component {

    constructor(props) {

        super(props);

        this.state = {

            listItems: [

                {

                    name: 'firstItem',

                    itemOptionSelector: [

                        {id: 1,isSelected: false},

                        {id: 2,isSelected: false},

                        {id: 3,isSelected: false},

                    ]

                },

                {

                    name: 'secondItem',

                    itemOptionSelector: [

                        {id: 1,isSelected: false},

                        {id: 2,isSelected: false},

                        {id: 3,isSelected: false},

                    ]

                }

            ]

        }

    }


    selectItemClickHandler = (event, index) => {

        this.setState(prevState => {

            const list = [];

            prevState.listItems.map((item, i) => {

                if (i === index) {

                    item.itemOptionSelector.map(selector => {

                        selector.isSelected = true

                    })

                }

                list.push(item);

            });

            return {

                listItems: list

            };

        });

    };


    render() {

        const {listItems} = this.state;


        return (

            <div>

                {listItems.map((item, index) => {

                    return <div key={index} className="button" onClick={(event) => {

                        this.selectItemClickHandler(event, index)

                    }}>{item.name}</div>

                })}

                <button onClick={()=>{ console.log(this.state, 'current state') }}>Show State in Console</button>

            </div>

        )

    }

}


查看完整回答
反對 回復 2022-09-02
?
慕村225694

TA貢獻1880條經驗 獲得超4個贊

首先,不清楚你想做什么。您沒有呈現“子項”(或選項),因此當前無法知道應將哪個選項更改為所選狀態。


通常,您可以像這樣更新數組狀態:


state = {

  items: [

    { isSelected: false, name: 'first' },

    { isSelected: false, name: 'second' },

    { isSelected: false, name: 'third' },

  ]

};


// ...


handleItemClick = (item, index) => {

  const items = this.state.items.slice();

  items[index] = { ...item, isSelected: !item.isSelected };

  this.setState({ items });

};


render() {

  return this.state.items.map((item, index) =>

    <div onClick={() => this.handleItemClick(item, index)}>{item.name}</div>);

}


查看完整回答
反對 回復 2022-09-02
?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

我將發布一個示例,因為不清楚您要更新的內容。


假設這是您的狀態。


state = {

  items: [

    {

      id: 1,

      isSelected: false,

    },

    {

      id: 2,

      isSelected: false,

    },

    {

      id: 3,

      isSelected: false,

    }

  ]

};

這就是你如何渲染你的項目。


<ul>

  {this.state.items.map((item, index) => (

    <li key={item.id} onClick={this.handleToggle(index)}>

      {item.id} {item.isSelected + ""}

    </li>

   ))}

</ul>

然后,您的處理程序需要如下所示。


// pay attention to the handler which creates a closure

handleToggle = index => () => {

  const items = [...this.state.items];


  items[index].isSelected = !items[index].isSelected;


  this.setState({ items });

};


查看完整回答
反對 回復 2022-09-02
  • 3 回答
  • 0 關注
  • 87 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號