Question

我有这个组件可以呈现多选复选框，而且效果很好。但我希望可以选择只指定一个复选框。

如何将此组件更改为动态

我正在将此组件与redux-form lib一起使用

代码

 import React, { PureComponent } from 'react'
    import PropTypes from 'prop-types'

    class CheckboxGroup extends PureComponent {
        constructor(props) {
            super(props)
            this.checkboxGroup = this.checkboxGroup.bind(this)
        }

        checkboxGroup() {
            const {
                id,
                options,
                input,
            } = this.props

            return options.map(option => (
              <div key={option.id}>
                <div className="checkbox-container">
                  <input
                    type="checkbox"
                    id={id}
                    name={`${input.name}[${option.id}]`}
                    value={option.name}
                    checked={input.value.indexOf(option.name) !== -1}
                    onChange={(event) => {
                       const newValue = [...input.value]
                       if (event.target.checked) {
                           newValue.push(option.name)
                       } else {
                           newValue.splice(newValue.indexOf(option.name), 1)
                       }

                       return input.onChange(newValue)
                   }}
                  />
                  {option.name && <span>{option.name}</span>}
                </div>
              </div>
            ))
        }

        render() {
            const { label, id } = this.props
            return (
              <div className="input-container">
                <label htmlFor={id}>
                  <span>{label}</span>
                </label>
                {this.checkboxGroup()}
              </div>
            )
        }
    }

    CheckboxGroup.propTypes = {
        options: PropTypes.arrayOf(PropTypes.object),
        input: PropTypes.shape({
        }).isRequired,
        id: PropTypes.string.isRequired,
        label: PropTypes.string.isRequired,
    }

    export default CheckboxGroup

Answer 1

您需要使用普通React.Component代替React.PureComponent。在您改变之后，您需要维护一个＆＃34; component state＆＃34;。它类似于以下示例代码。

class CheckboxGroup extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selected: []
    }
  }

  handleClick(id) {
    return (ev) => {
      const {single} = this.props
      const selectedIds = this.state.selected

      if (single) {
        // there can only be one active id
        if (selectedIds.length !== 0) {
          // check if it's the current id
          if (selectedIds[0] === id) {
            // it's the current id, remove the id
            this.setState({
              selected: []
            })
          }
        } else {
          // there is no id selected, add the current id
          this.setState({
            selected: [id]
          })
        }
      } else {
        const selected = selectedIds.slice()
        const index = = selectedIds.indexOf(id)

        // check if the current id is already selected
        if (index !== -1) {
          // current id is not selected, add the current id
          selected.push(id)
        } else {
          // current id is selected, remove the current id
          selected.splice(index, 1)
        }

        this.setState({
          selected
        })
      }
    }
  }

  render() {
    const {options, input, id} = this.props
    const {selected} = this.state

    options.map((option, index) => (
      <div key={option.id}>
        <div className="checkbox-container">
          <input
            type="checkbox"
            id={id}
            name={input.name + '[' + option.id + ']'}
            value={option.name}
            checked={selected.contains(option.id)}
            onChange={this.handleClick(option.id)}
            />
            {option.name && <span>{option.name}</span>}
        </div>
      </div>
    ))
  }
}

React js能够单选复选框

1 个答案: