如何将值传递给我通过 onClick 事件从另一个组件获取的组件答案

【问题标题】：How to pass value to component which I get from another by onClick event如何将值传递给我通过 onClick 事件从另一个组件获取的组件
【发布时间】：2019-11-17 17:52:00
【问题描述】：

我是新手。非常抱歉）我创建了我的图标组件，其中包含 svg 图标：

<IconPick icon={'globe'} />

然后我创建了一组图标名称：

iconsList = ['globe', 'mail', ...];

并通过此组件映射以显示我在一个块中拥有的所有图标：

<ul className="icons-list__wrapper">
    {iconsList.map(icon =>
        <li data-icon={icon} key={icon}>
            <IconPick icon={icon} />
        </li>
    )}
</ul>

一切正常。现在我想用这种块状的图标选择器。所以当人们点击任何图标时，它会出现在一个新的区块中，所以我使用了 onClick：

    handleCheck = (e) => {
        e.currentTarget.dataset.icon
    }
...
    <div>
        <ul className="icons-list__wrapper">
            {iconsList.map(icon =>
                <li
                data-icon={icon}
                key={icon}
                onClick={this.handleCheck}
                >
                    <IconPick icon={icon} />
                </li>
            )}
        </ul>
    </div>
...

所以现在我创建了一个新的 div，我想在其中将 onClick 获得的数据值传递给 clickedIcon：

<div>
    <IconPick icon={clickedIcon}/>
</div>

但是我做不好，你能帮帮我吗？或者只是建议。

我将不胜感激。

【问题讨论】：

查看 React 文档并阅读 state 和 synthetic events
谢谢。我读过它并且知道状态简单文本如何改变，但不能从点击的图标中获取价值并将其发送到新块，对我来说这太难了。

标签： reactjs react-native

【解决方案1】：

您可以将 clickedIcon 定义为组件的状态。

state={
   clickedIcon:undefined // initially it is undefined
}

在您的处理程序中，您更新 clickedIcon 值：

handleCheck = icon => this.setState({clickedIcon : icon});

传递图标点击值：

<li
     data-icon={icon}
     key={icon}
     onClick={()=>this.handleCheck(icon)}>
   <IconPick icon={icon} />
</li>

最后，您可以轻松地将 clickedIcon 值传递给您的 IconPick ：

<div>
    <IconPick icon={this.state.clickedIcon}/>
</div>

【讨论】：

【解决方案2】：

React 的一个好处是它允许您在组件上的元 state 中处理数据，而不是让您插入与 data-attributes 相同的数据，以便稍后由您的“处理代码”收集。

尝试使用：

class IconPicker extends Component {
  constructor(props){
    super(props)
    this.state = {
      iconList: [ '...'],
      selectedIcon: ''
    }
  }
  render() {
    return (
      <div>
        <ul className="icons-list__wrapper">
          {this.state.iconsList.map(icon =>
            <li
              key={icon}
              onClick={() => this.setState({...this.state, selectedIcon: icon})}
            >
              <IconPick icon={icon} />
            </li>
          )}
        </ul>
        <div>
          <IconPick icon={this.state.selectedIcon}/>
        </div>
      </div>
    );
  }
}

【讨论】：

谢谢你，Japsz。这种方式比较实用。