Question

我动态创建了一个state，但是我需要在渲染器中使用这个state。

看到我的问题：

handleChange = (name, checked) => {
  this.setState({
    [name]: checked,
  })
}

因此，如何在我的render中显示我的[name]状态？（我不知道他的名字，因为它是动态的）

render(){

  console.log(this.state....?)

  return(
    <p>Hello</p>
  )
}

当我检查我的checbkox时，将调用我的函数handleChange。因此，如果我有5、10、20个复选框，如何显示我的[name]状态？

---->更新-完整代码<----
我正在使用悬停提示来显示我的复选框：

使用材质ui的CSS：

  hideCheckbox: {
    display: 'none',
  },
  showCheckbox: {
    display: 'initial',
  },

我的主班：

export class Item extends Component {

state = { 
  isHovering: true,
  checkboxChecked: false,
}

handleGetCardSelected = (id, checked) => { 
 //Here I set isHovering to display my checkbox
 //checkboxChecked is a control variable to always display the checkbox if it's checked

  if(checked){
    this.setState({
      isHovering: !this.state.isHovering,
      checkboxChecked: true,
    })

  } else {
    this.setState({
      checkboxChecked: false,
    })
  }
}

handleMouseHover = () => {
  if(!this.state.checkboxChecked){
    this.setState(this.toggleHoverState);
  }
}

toggleHoverState = (state) => {
  return {
    isHovering: !state.isHovering,
  };
}
return(
 <div 
   onMouseEnter={this.handleMouseHover} 
   onMouseLeave={this.handleMouseHover}
  >
   <div className={`
     ${this.state.isHovering && classes.hideCheckbox }
     ${this.state.checkboxChecked && classes.showCheckbox}
    `}>
      <CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
    </div>
  </div>

 <div 
   onMouseEnter={this.handleMouseHover} 
   onMouseLeave={this.handleMouseHover}
  >
   <div className={`
     ${this.state.isHovering && classes.hideCheckbox }
     ${this.state.checkboxChecked && classes.showCheckbox}
    `}>
      <CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
    </div>
  </div>

 <div 
   onMouseEnter={this.handleMouseHover} 
   onMouseLeave={this.handleMouseHover}
  >
   <div className={`
     ${this.state.isHovering && classes.hideCheckbox }
     ${this.state.checkboxChecked && classes.showCheckbox}
    `}>
      <CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
    </div>
  </div>
 )
 }

我的CheckboxCard：

import React from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import { Checkbox } from '@material-ui/core';
const GreenCheckbox = withStyles({
  root: {
    color: '#43a04754',
    '&$checked': {
      color: '#43a047',
    },
    '&:hover': {
      color: '#43a047',
      backgroundColor: 'initial',
    },
  },
  checked: {},
})(props => <Checkbox color="default" {...props} />);

export default function CheckBoxCard(props){
  const [state, setState] = React.useState({
    idItem: false,
  });

  const handleCheckbox = name => event => {
    setState({ ...state, [name]: event.target.checked });

    let id = name
    let checked = event.target.checked
    props.handleGetCardSelected(id, checked)
  };

  return(
    <GreenCheckbox
      checked={state.idItem}
      onChange={handleCheckbox('idItem')}
      value="idItem"
      inputProps={{
        'aria-label': 'primary checkbox',
      }}
    />
  );
}

默认情况下，由于我的state isHovering为true，所以我的复选框是隐藏的，因此设置了css变量hideCheckbox（“ display：none”）。

如果我将鼠标悬停在元素上，则称为handleMouseHover并显示该复选框！

如果我选中了我的复选框，则将checkboxChecked设置为true，现在我将始终显示我的复选框！但是，如果我有两个或更多元素，则会显示所有复选框，因为checkboxChecked是唯一元素！

因此，我的checkboxChecked必须是动态的并且按项！这样，如果为checked，则仅显示此复选框。其他人没有！

对于第一个元素：
${this.state.checkboxCheckedITEM1 && classes.showCheckbox}

第二个元素：
${this.state.checkboxCheckedITEM2 && classes.showCheckbox}

第二个元素：
${this.state.checkboxCheckedITEM3 && classes.showCheckbox}

我在沙箱中更新代码：https://codesandbox.io/embed/material-demo-16t91?fontsize=14

我该怎么做？

Answer 1

那么，如果我有5、10、20个复选框，如何显示我的[姓名]状态？

我认为实现此目的的明智方法是嵌套组件。有一个抽象的父组件，该父组件仅在名称可用时才呈现子组件。通过使用这种模式，您的问题可以得到解决。

Check out this helpful article

Answer 2

您可以过滤对象以仅获取选中的名称。

Object.keys(this.state).filter(name => this.state[name]);

Answer 3

如果您有checkbox个组件的有限列表

render() {
  return (
    <div>
      <Checkbox
        handleChange={() => this.handleChange('abc', !this.state[abc])}
        className={this.state['abc'] ? 'checked-class' : '' }
      />
    </div>
  )
}

在另一种情况下，您呈现动态复选框列表。

componentDidMount() {
  //Calling API to return dynamic list of checkboxes, and dump them into a state
  this.setState({ listOfCheckboxes });
}

然后在您的render方法中，您将使用.map函数

render() {
  return (
    <div>
    {
      this.state.listOfCheckboxes.map(x => (
        <Checkbox
          handleChange={() => this.handleChange(x.name, !this.state[x.name]) }
          className={this.state[x.name] ? 'checked-class' : '' }
        />))
    }
    </div>
  )
}

Answer 4

这样做：

this.state[name]

Answer 5

您可以查看Object.keys()，但是如果将来您需要处理多个状态，则迭代似乎无法解决问题。

您也可以给它加上前缀[name_${name}]: checked，但完全不建议这样做。

如果这不是问题，请使用一个对象，您将完全控制它。

this.setState({
  something: {
    name,
    checked  
  },
})

我如何在反应中显示动态状态

5 个答案: