时间戳

首页 > 解决方案 > 如何将 id 发送到 refs(forwardrefs) 到子组件

javascript - 如何将 id 发送到 refs(forwardrefs) 到子组件

问题描述

我有 4 个按钮和提交按钮，单击提交按钮后，我需要根据 [2,4,3,1] 之类的模式为 4 个按钮添加效果或按钮焦点，单击提交按钮时按钮应该像这种模式一样动画. 这是我尝试过的，我无法使用 refs 发送 id。我如何将 id 发送到 refs 或如何根据 refs 或任何其他关于如何为子组件添加效果的动画按钮。

constructor(props) {
    super(props);
    this.state = {
      values: [
        { id: 1, color: "blue" },
        { id: 2, color: "red" },
        { id: 3, color: "green" },
        { id: 4, color: "yellow" }
      ]
    };
    this.myRef = React.createRef();
  }

   getvalue = (id, ref) => {
     console.log(ref);
   };
in render ` const { values } = this.state;`

         <div className="col-md-12">
            {values.map(value => (
              <Card
                ref={this.myRef}
                key={value.id}
                value={value}
                id={value.id}
                onbtnclick={() => this.getvalue(value.id)}
              />
            ))}
          </div>

子组件

const Card = React.forwardRef((props, ref) => {
  return (
    <button
      ref={ref}
      key={props.id}
      className="btn newcard m-2 active"
      aria-pressed="true"
      onClick={() => this.props.onbtnclick(props.id, ref)}
      style={{ background: `${props.value.color}` }}
    />
  );
});
const ref = React.createRef;

标签： javascriptcssreactjs

解决方案

我在这里为您创建了一个沙盒示例https://codesandbox.io/s/xenodochial-flower-cl52b

你需要使用 React Hooks 的 useImperativeHandle 和 Forward Refs

/// ------------- 这里是你在评论中提到的重构沙盒 https://codesandbox.io/s/amazing-germain-ww7yi

推荐阅读