Question

我正在尝试创建一个具有多个复选框的状态已满对话框。我正在做的是，当用户关闭对话框时，我将对话框的状态保存到本地存储中，而当用户再次打开对话框时，我从本地存储中获得了该项目，但无法正确更新状态。

这是发生了什么：当用户第一次打开对话框时，所有复选框均未选中，并且用户选择其中的一部分并选中它们并在关闭对话框时关闭对话框，因此该对话框消失了，因此当用户打开对话框时再次取消选中所有复选框。我想要的是：当用户再次打开对话框时，它应该具有先前选中的复选框。我正在尝试：所以当用户关闭复选框时，我将状态保存在本地存储中，以便当用户再次打开它时，我将设置状态，以便先前选中的框保持选中状态。它不起作用在此先感谢！

    import React, { Component } from 'react';

class FilterPanel extends Component {
  constructor(props) {
    super(props);
            this.state = {
                active: [],
                filters: []
            };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmission = this.handleSubmission.bind(this);
  }

  //////////////////////////////////////retrieving from local storage
  componentDidMount(){

    this.setState(JSON.parse(localStorage.getItem('checks')));
    }
    //////////////////////////////////////////////saving state in local storage
    componentWillUnmount(){
      localStorage.setItem('checks',JSON.stringify(this.state));
    }
  handleChange(event) {
      this.setState({ [event.target.id]: (this.state[event.target.id] === null || this.state[event.target.id] === undefined) ? true : !this.state[event.target.id] });
      this.setState({ active: {[event.target.id]: (this.state.active[event.target.id] === null || this.state.active[event.target.id] === undefined) ? true : !this.state.active[event.target.id] }});
      if (this.state.filters.includes(event.target.id)){
          var toremove = this.state.filters.indexOf(event.target.id);
          this.state.filters.splice(toremove, 1);
          console.log("this is the state in handle1");
          console.log(this.state);
      }
      else
        {
          this.state.filters.push(event.target.id);
            console.log("this is the state in handle2");
            console.log(this.state);
      }

      console.log("this is the event.target.id");
      console.log([event]);
  }
  handleSubmission(event) {
    this.props.handleFilters({[this.props.id]: Object.keys(this.state.active)})
    this.props.handler(false);
    event.preventDefault();
  }

  render() {
    const header = <div className='modal-header'><h5 className='modal-title'>{this.props.title}</h5><button type='button' className='close' aria-label='Close' onClick={() => this.props.handler(false)}><span aria-hidden='true'>&times;</span></button></div>;
    const options = this.props.options.map(option => {
      return (
        <div className='form-check'>
          <label className='form-check-label'>
            <input className='form-check-input' type='checkbox' id={option} value={option} onChange={this.handleChange}/> {option}
            <span className='form-check-sign'>
              <span className='check'></span>
            </span>
          </label>
        </div>
      )
    });

    return (
      <form onSubmit={this.handleSubmission}>
        <div className='modal fade show' style={{ display: 'block', overflow: 'auto' }} tabIndex='-1' role='dialog' aria-labelledby='ModalLabel' aria-hidden='true'>
          <div className='modal-dialog' role='document'>
            <div className='modal-content'>
              {header}
              <div className='modal-body'>
                <div className='backtittle'>
                  <h6 style={{padding:'5px' }}>{this.props.description}</h6></div>
                    {options}
                  </div>
              <div className='modal-footer justify-content-center'>
                <input className='btn btn-primary-filters btn-sm' type='submit' value='Filtrar'  />
                <button type='button' className='btn btn-primary-filters btn-sm'  onClick={() => this.restoreFilters()}>Eliminar TODOS los filtros</button>
              </div>
            </div>
          </div>
        </div>
      </form>
    );

  }

}
export default FilterPanel;

Answer 1

您需要从状态中设置复选框值。

请参阅受控组件docs。

尝试将选中的道具添加到输入字段，并从状态中填充其值。

类似这样的东西：

<input
  className='form-check-input'
  type='checkbox'
  id={option}
  value={option}
  onChange={this.handleChange}
  checked={this.state.active[option]}
/>

以编程方式反应复选框的更新状态，而无需在组件创建时单击它

1 个答案: