Question

我正在使用Material-UI，我想使用List / ListItem组件来分组我的单选按钮。

与此类似：

<RadioButtonGroup ...>
  <List>
    <ListItem
      ...
      nestedItems={[
        <RadioButton ... />,
        <RadioButton ... />
      ]}
    />
    <ListItem
      ...
      nestedItems={[
        <RadioButton ... />,
        <RadioButton ... />
      ]}
    />
  </List>
</RadioButtonGroup>

有没有办法存档？

感谢。

Answer 1

我的临时解决方法是使用复选框，其外观和行为类似于单选按钮。

import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import Checkbox from 'material-ui/lib/checkbox';
import RadioChecked from 'material-ui/lib/svg-icons/toggle/radio-button-checked';
import RadioUnchecked from 'material-ui/lib/svg-icons/toggle/radio-button-unchecked';

...

onChangeRadio = (event) => this.setState({ radioValue: event.target.value });

...
<List>
  <ListItem
    primaryText='First Group'
    primaryTogglesNestedList={true}
    nestedItems={[
      <ListItem                               
        primaryText='Radio 1'
        leftCheckbox={
          <Checkbox
            value='1'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '1'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />
        }                  
      />
      <ListItem                               
        primaryText='Radio 2'
        leftCheckbox={
          <Checkbox
            value='2'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '2'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />}                  
        />
      ]}
    />
  <ListItem
    primaryText='Second Group'
    primaryTogglesNestedList={true}
    nestedItems={[
      <ListItem                               
        primaryText='Radio 3'
        leftCheckbox={
          <Checkbox
            value='3'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '3'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />
        }                  
      />
      <ListItem                               
        primaryText='Radio 4'
        leftCheckbox={
          <Checkbox
            value='4'
            onCheck={this.onChangeRadio}
            checked={this.state.radioValue == '4'}
            checkedIcon={<RadioChecked />}
            unCheckedIcon={<RadioUnchecked />}
          />
        }                  
      />
    ]}
  />
</List>

我希望有一个比这更好的解决方案。

Answer 2

也许这会有所帮助

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import IconButton from '@material-ui/core/IconButton';
import CommentIcon from '@material-ui/icons/Comment';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    overflow: 'auto',
    maxHeight: 500,
    backgroundColor: theme.palette.background.paper,
  },
});

class RadioList extends React.Component {
  state = {
    checked: 0,
  };

  handleToggle = value => () => {
    this.setState({ checked: value });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <List>
          {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
            <ListItem
              key={value}
              role={undefined}
              dense
              button
              onClick={this.handleToggle(value)}
              className={classes.listItem}
            >
              <FormControlLabel control={<Radio />} 
                checked={this.state.checked === value}
                tabIndex={-1}
                disableRipple
              />
              <ListItemText primary={`Line item ${value + 1}`} />
            </ListItem>
          ))}
        </List>
      </div>
    );
  }
}

RadioList.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RadioList);

嵌套List中的RadioButtonGroup

2 个答案: