将输入键事件完成从芯片组件传递到选项卡组件

Question

• 我正在尝试将框架CSS与回车键功能集成在一起。
• 单击按钮“测试芯片”时，将打开一个带有文本框的对话框。
• 在该芯片中，当您键入一些字母并输入时，应在下面的div上绘制带有框架css的

                      这里应该发生灰色阴影                     

• 不确定如何将道具从筹码组件传递到标签组件。
• 带有对话框的文本框位于chips-dialog.js中
• div代码位于tab-demo.js中
• 所有CSS代码都存在于card.css
中
• 你们能帮助我吗，以便将来我自己修复它。
• 在下面提供代码段和沙箱。

无法正常运行的演示https://codesandbox.io/s/l20n739xqz

tab-demo.js

<ChipsButton
                      className={classes.chipContainer}
                      chipName="button test"

                    />

                    <div className="card" style={{ border: "1px solid red" }}>
                      grey shade should happen here
                    </div>
                    chips-dialog.js
                      handleChangeText(e) {
    //debugger;
    console.log("handleChangeText--->", e);
    this.setState({ value: e.target.value });
  }

chips-dialog.js

  timeout = () => {
    setTimeout(() => {
      this.setState((state, props) => {
        return { cardData: "card data testing testing" };
      });
    }, 2000);
  };

  keyPress(e) {
    // debugger;
    console.log("keyPress--->", e.target.value);

    if (e.keyCode == 13) {
      console.log("value", e.target.value);
      // pass the value from here to the parent component to start applying skeleton css
      this.timeout();

      // put the login here
    }
  }