Question

我有一个CheckboxGroup组件，它接收options数组道具并生成CheckboxInput个组件。在页面加载时，我调用一个API，该API返回一组预先选中的复选框（传递给value道具）。根据登录用户的不同，此调用可以返回空数组或以前选择的复选框选项。

以下代码成功获取API调用的响应，并将相关复选框设置为“已检查”。我遇到的问题是，此代码不允许我在页面加载后对复选框进行更改（单击复选框无效）。

我认为初始selectedCheckboxes状态与API调用的值之间也存在一些脱节，但我读到设置道具作为初始状态是反模式（例如selectedCheckboxes: props.value,）。

export default class CheckboxGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCheckboxes: [],
    };
  }

  addCheckboxToSelected = (id) => {
    if (this.state.selectedCheckboxes.includes(id)) {
      // Remove checkbox from array and update state
      const filteredArray = this.state.selectedCheckboxes.filter(item => item !== id);
      this.setState({ selectedCheckboxes: filteredArray });
    } else {
      // Add checkbox to array and update state
      this.setState({ selectedCheckboxes: this.state.selectedCheckboxes.concat(id) });
    }
  }

  checkIfSelected = (checkboxValue) => {
    const preSelectedCheckboxes = this.props.value;
    let selectedBool = false;
    preSelectedCheckboxes.some(function(object) {
      if (object.id === checkboxValue) {
        selectedBool = true;
      }
      return false;
    });
    return selectedBool;
  }

  render() {
    const { label, name, options } = this.props;
    return (
      <div className="form-group form-inline">
        <span className="checkboxgroup-heading">{label}</span>

        <div className="form-group-container">
          {options.map(object => (
            <CheckboxInput
              key={object.value}
              name={name}
              label={object.label}
              onChange={this.addCheckboxToSelected}
              value={object.value}
              checked={this.checkIfSelected(object.value)}
            />
          ))}
        </div>
      </div>
    );
  }
}

这是无状态CheckboxInput组件

const CheckboxInput = ({ name, label, onChange, value, checked }) => {
  return (
    <div className="field form-group filter-input">
      <input
        type="checkbox"
        id={value}
        name={name}
        value={value}
        onChange={() => onChange(value)}
        checked={checked}
      />
      <label htmlFor={value} className="form-control">{label}</label>
    </div>
  );
};

Answer 1

检查以下代码段。这可能有所帮助。如果您有疑问，请告诉我。

＆＃13;

const CheckboxField = ({checked, onChange}) => {
  return (
    <input type="checkbox" checked={checked} onChange={ev => onChange(ev.target.checked)} />
  );
};

class App extends React.Component {
  constructor() {
    super();
    
    this.state = {
      options: [{id: "1", checked: true}, {id: "2", checked: false}]
    };
  }
  
  handleCheckboxChange(checked, option) {
    const {options} = this.state;
    
    var cOptions = [...options];
    for(var i in cOptions) {
      if(cOptions[i].id == option.id) {
        cOptions[i].checked = checked;
      }
    }
    this.setState({
      options: cOptions
    }, () => console.log(options));
  }

  render() {
    const {options} = this.state;
  
    return (
      <div>
        {
          options.map(option => {
            return (
              <CheckboxField key={option.id} checked={option.checked} onChange={value => this.handleCheckboxChange(value, option)} />
            )
          })
        }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<div id="root"></div>

<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>

＆＃13;

React Checkbox Group - 从API设置初始状态

1 个答案: