Question

render(){
  return (
    <div>
      this.data.map(item=> {
         <div aria-checked="true/false">{item}<div>
      })
    </div>
  )
}

对于上面的代码，我想写一个onClick处理程序，它根据所选/单击的项目将aria-checked的值更改为true。如果选择了一个项目，则aria-checked将为true，其余为false。

我知道我需要一个布尔类型的checked组件状态，但我不知道如何处理处理程序逻辑。

Answer 1

你可以setAttribute，在这里：

constructor() {
    super();
    this.data = ["hello", "world"];
}

handleClick = (e) => {
    const currentAriaChecked = (e.currentTarget.getAttribute("aria-checked") === 'true');
    e.currentTarget.setAttribute("aria-checked", !currentAriaChecked);
};

render() {
    return (
      <div>
        {          
          this.data
            .map(item => (<div aria-checked="true" onClick={this.handleClick}>{item}</div>))
        }
      </div>
    );
}

更新

使用打字稿和反应方式

  render() {
    return (
      <div>
        {          
          this.data
            .map(item => (<Check>{item}</Check>))
        }
      </div>
    );
  }

您的组件check

state = {
  isChecked: false
}

handleClick = (e) => {
  this.setState((prevState,props) => {
    return {isChecked: !prevState.isChecked }
  })
};

render() {
  return (
    <div aria-checked={this.state.isChecked} onClick={this.handleClick}>
      {this.props.children} {this.state.isChecked.toString()}
    </div>
  );
}

请参阅playground。

确定单击的项目并更新React中的aria-checked值

1 个答案:

更新