Как сохранить отмеченный элемент в массиве в reactjs с использованием приставки - PullRequest
0 голосов
/ 27 марта 2020

Я пытаюсь отфильтровать список элементов с помощью флажка, и я не знаю, как это реализовать. Путь, который я сделал, определенно не работает. Может кто-нибудь, пожалуйста, помогите мне исправить это.

Вот мой код

class CartItems extends  React.Component {
  state ={
    cart: [],
    checkedValue: []
  }

  componentDidMount(){
      this.setState({
        cart: [...this.props.cart]
      });
  }

  handleCheckboxChange = (event) => {
      //TODO: Checkbox
      this.setState({
        checkedValue: this.state.checkedValue.concat([event])
      })
  }

  render() {
    console.log('Checked Value', this.state.checkedValue);

    return (
    this.props.cart.map(item => (
      <Grid
        style={{ borderBottom: "1px solid #d2d2d2" }}
        container
        className="margin15"
      >

        <Grid container spacing={16} justify="center" className="cart">
          <Grid container justify="flex-end" item xs={1}>
            <Checkbox
                onChange={this.handleCheckboxChange}
                style={{ padding: "0px" }}
            />
          </Grid>

Когда я консоль регистрирую проверенное значение, я получаю что-то вроде этого. im

любой, пожалуйста, помогите мне решить, я понятия не имею, как реализовать пункт флажок. У меня есть список элементов, и я хочу отфильтровать элемент, который проверен. И я не могу понять, как это сделать. image3

1 Ответ

1 голос
/ 27 марта 2020

Вам необходимо инициализировать состояние элемента проверки как истинное или ложное изначально. После того, как вы установите флажок, запускается функция handleCheckboxChange.

 handleCheckboxChange=(e)=>{ this.setState({data: !this.state.data}) }

Затем вы можете сохранять это состояние данных в любом месте.

Я пробовал это в одном из моих проектов, и он отлично работает:

constructor(props) {
    super(props)    
    this.state = {
        fb:                    false
    }
}
fbChange=(e)=>{ this.setState({fb: !this.state.fb}) }

в рендере

{ this.state.posts.map(( i, index ) => { return (
....
<label><input type="checkbox" checked={JSON.parse(i.socialAccounts[0])} onChange={this.fbChange}/>Facebook</label>
.....
)})}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...