Question

我正在开发这个项目，我的要求是在运行时动态创建动态复选框。我从componentWillMount中的API获取数组中的值，数组如下所示：

[＆＃34; Diesel＆＃34;，＆＃34; SomeTeam＆＃34;，＆＃34; demo＆＃34;，＆＃34; lazyTeam＆＃34;，＆＃34; demoTeam＆＃34;，＆＃34; X＆amp; G＆＃34;，＆＃34; Kteam＆＃34;]

我一直在试图解决这个问题，到目前为止，我一直在componentWillMount中创建动态状态，以便最初将所有复选框标记为False，并通过使用map函数解析数组来呈现复选框。

componentWillMount如下所示：

axios.get(`/teams/tlist`).then(response => {
    let tempTeamArr = []
    Object.keys(response.data.teams).map((key, index) => {
      tempTeamArr.push(response.data.teams[key].name)
      console.log(tempTeamArr)
      if(index == Object.keys(response.data.teams).length-1) {
        this.setState({
          allTeams: tempTeamArr,
          [`${response.data.teams[key].name}CheckedStat`]: false
        }, () => {
          console.log(`dynamic state: this.state[${response.data.teams[key].name}CheckedStat]`, this.state[`${response.data.teams[key].name}CheckedStat`])
        })
      }
    })
  })

我的复选框组件如下所示：

{allTeams.map((data, index) => {
return (
    <Checkbox
        label={data}
        id={data}
        checked={this.state[`${data}CheckedStat`]}
        onChecked={bool => {this.setState({[`${data}CheckedStat`]: !this.state[`${data}CheckedStat`]})}}
        />
)})

复选框组件代码是：

const Checkbox = ({ label, id, onChecked, checked }) => (
<StyledCheckbox>
    <input
      className="checkbox"
      type="checkbox"
      id={id}
      value={id}
      onChange={e => onChecked(e.target.checked)}
      checked={checked}
    />
    <label htmlFor={id}>{label}</label>
  </StyledCheckbox>
)

export { Checkbox }

我面临的问题是，这会呈现复选框，但检查取消选中非常不稳定且失控。我需要你的帮助真的很糟糕，如果你能帮我解决这个问题会非常好。这将有助于更多像我这样的人，如果这些琐碎的UI呈现问题仍然存在复杂的问题。

谢谢。

Answer 1

从我的头顶，我想出了这个灵魂。丑陋，但想要工作。

你可以通过使用复选框组件等来简化它。希望你明白这一点。

对于简单的事情，只是填充像那样的数组

componentWillMount() {
    var me = this,
      teams = ["Diesel", "SomeTeam", "demo", "lazyTeam", "demoTeam", "X & G", "Kteam"],
      setupCheckboxes = (function () {
        return teams.map((el) => {
          return  {
            teamName: el,
            isChecked: false
          }
        });
      })();

    this.setState({
      allTeamsCbData: setupCheckboxes
    });
  }

渲染

 render() {
    let teamsCbData = this.state.allTeamsCbData,
      me = this;
    return (
      <div>
        {teamsCbData.map((el, index) => {
          return (
            <div key={el.teamName}>
              <input type="checkbox" name={el.teamName} checked={el.isChecked} onChange={
                  function () {
                    let curData = me.state.allTeamsCbData,
                        id = curData.findIndex(function(elem){ return elem.teamName == el.teamName});

                        curData[id].isChecked = !curData[id].isChecked;

                    me.setState({allTeamsCbData:curData})
                  }
                } />
              <label >{el.teamName}</label>
            </div>
          );
        })}
      </div>
    );
  };

顺便问一下你的意思是什么？

检查取消选中是非常不稳定的

Answer 2

好的，我已经解决了。

问题就像：

<DropDownBox style={{ marginRight: '30px' }} className="DropDownBoxA" onClick={e=>this.toggleDropDownView}>
  <DropdownView style={DropdownViewVisibleA ? { opacity: '1', zIndex: '1' } : { opacity: '0', zIndex: '-1' }} className="DropdownViewA"> 
                ... rest UL LI list code

  </DropdownView>
</DropDownBox>

问题出现在this.toggleDropDownView中，当下拉视图可见并且我尝试检查下拉视图中的复选框时，首先在toggleDropDown函数中触发set，强制视图重新渲染，单击复选框的状态失败立即渲染。当我选中一个复选框时，关闭下拉菜单并再次打开它，我看到复选框已选中。

我通过重写上面的代码来纠正状态冲突问题，稍作改动：

<DropDownBox style={{ marginRight: '30px' }} className="DropDownBoxA" onClick={e=>this.setState({ DropdownViewVisibleA: !this.state.DropdownViewVisibleA, DropdownViewVisibleB: false })}>
  <DropdownView style={DropdownViewVisibleA ? { opacity: '1', zIndex: '1' } : { opacity: '0', zIndex: '-1' }} className="DropdownViewA"> 
                ... rest UL LI list code

  </DropdownView>
</DropDownBox>

希望这有助于其他人，并感谢大家帮助我解决这个问题。

来自数组

2 个答案: