Как выбрать атрибут динамического дочернего элемента [проверено] с помощью onclick в ReactJS - PullRequest
0 голосов
/ 14 декабря 2018

Я создаю раскрывающийся список с множественным выбором с помощью флажка, я использовал onClick в MenuItem раскрывающегося списка, чтобы пользователь мог щелкнуть на MenuItem, который является родительским для флажка, чтобы установить и снять флажок вместо того, чтобы нажимать точно на флажок,Этот код ниже работает, и я могу получить проверенный статус флажка, когда я отображаю его со статическим значением.То же самое не работает. Я пытаюсь использовать динамические значения, такие как использование массива, ссылаются на компонент -FilterMultipleItems, я получаю неопределенное значение в методе handleChange для event.target.checked, я новичок в реакции, может кто-нибудь мне помочь, спасибо.

class CustomButton extends React.Component {

    render() {
      const { onPress, isChecked, values} = this.props;      
      return (
        <MenuItem onClick={onPress}>
        <Checkbox
            disabled
            checked={isChecked}                        
            value={values}/>    {values}         
        </MenuItem>
      );
    }
  }

class FilterMultipleItems extends React.Component {

  state = {open: false,}

  constructor(props) {
    super(props)
   this.handleChange = this.handleChange.bind(this)
  }

  handleChange = name => event => {        
   console.log(name, event.target.checked) 
   //event.target.checked getting undefined
  }


render() {
const { classes, value } = this.props;
const { open } = this.state;

 // here I'm adding the dynamic values to the CustomButton Component

var filtersItems=[];
for(var i=0;i<this.props.value.filtersValues.length;i++){
    var currentItem = this.props.value.filtersValues[i];
    this.state[currentItem]= false;
    filtersItems.push( <CustomButton onPress={this.handleChange(currentItem)} values={currentItem} checked={this.state[currentItem]} key={i}>Click on me</CustomButton>)
}

return (
  <MenuList>
    {/*rendering the component here*/}
     {filtersItems}
  </MenuList>
);
} 

}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...