Javascript 将一段数据从子组件传递到父组件是否是react中的反模式？

考虑下面的例子

我有一个叫做ChemVisualization.jsx的组件，如下所示

const ChemVisualization = props => {

 const { getChemists, chemists } = props;

 useEffect(() => {
    getChemists();
  }, [getChemists]);

// useState hook is used here 
// handleChange sets the name property
// i check for chemists based on name property here and pass it as props to 
// SearchableDropdown component where it renders the list 

 const getChemistId = id => {
    console.log(id);
    // showing undefined
  };

return(
 <SearchableDropdown
            getName={ChemistAnalytics}
            onChange={e => handleChange(e)}
            name="name"
            value={name}
            onSubmit={e => handleSubmit(e)}
            entities={result}
            handleClick={getChemistId}
          />
);
}

const-ChemVisualization=props=>{
const{getChemists，chemists}=props；
useffect（（）=>{
药剂师（）；
}，[getChemists]）；
//这里使用useState钩子
//handleChange设置name属性
//我在这里根据名称属性检查化学家，并将其作为道具传递给
//SearchableDropdown组件，用于呈现列表
常量getChemistId=id=>{
console.log（id）；
//显示未定义的
};
返回(
handleChange（e）}
name=“name”
值={name}
onSubmit={e=>handleSubmit（e）}
实体={result}
handleClick={getChemistId}
/>
);
}

SearchableDropdown.jsx

const SearchableDropdown = props => {

// destructure props here
return(
<div className="control has-icons-left w-3/5 ">
        <input
          type="text"
          placeholder="search"
          value={value}
          name={name}
          onChange={onChange}
          className="input"
          autoComplete="off"
        />
        <span className="icon is-left">
          <FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
        </span>
      </div>
      {entities && (
        <div className="dropdown">
          <div className="dropdown-content">
            {entities.map(r => (
              <div
                className="dropdown-item text-xl hover:bg-gray-400 w-full"
                key={r._id}
                onClick={r => handleClick(r._id)}
              >
                {r.chem_name}
              </div>
            ))}
          </div>
        </div>
      )}
);
}

const SearchableDropdown=props=>{
//这里是解构道具
返回(
{实体&&(
{entities.map（r=>(
handleClick（r._id）}
>
{r.chem_name}
))}
)}
);
}

单击下拉项时，不会在其父组件中获取id

我的问题是如何获取我单击的下拉项的id？ 将数据从子组件传递到其父组件是一种反模式吗

onClick={e => handleClick(r._id)}

---

用e代替r

子组件调用其父组件为响应事件而提供的函数是正常的。然后，父对象根据需要使用新信息重新提交。这将使状态信息保持相当高的水平。有关详细信息，请参阅文档

在你的例子中

<div className="dropdown-content">
  {entities.map(r => (
    <div
      className="dropdown-item text-xl hover:bg-gray-400 w-full"
      key={r._id}
      onClick={r => handleClick(r._id)}
    >
      {r.chem_name}
    </div>
  ))}
</div>

---

唯一的变化是在

onClick={（）=>handleClick（r.\u id）}
中将
r
替换为
（
），我认为
r.\u id
是未定义的，因为onClick函数将onClick事件
r
作为
handleClick
参数传递，而不是从实体映射块传递的r。依国际海事组织的说法，维护组件的状态是朝一个方向飞行更容易。你会推荐什么解决方案？提升状态应该是一个很好的解决方案。因此，您将有一个包含状态和处理程序的
容器
，这些将被传递给子组件，这些子组件可以作为
PureComponents
进行优化，或者什么都没有，因为它没有被使用。我见过许多版本的事件处理程序，它们是什么意思
onClick={e=>handleChange（e）}
和这个
onClick={handleChange}
handleChange（event）{//do some here}
我们什么时候需要第一个版本？@yashwantsomayajula-您需要
onClick={（）=>handleClick（r.\u id）}
在这种情况下，因为您想要传递给
handleClick
的是
r
对象的
\u id
属性的值。如果它接受了一个事件对象，那么是的，您可以只执行
onClick={handleClick}
或
onClick={e=>handleClick（e）}
（尽管后者是没有意义的，还是执行前者）。但是如果您想传入该ID值，您需要
onClick={（）=>handleClick（r.\u ID）}
。
<div className="dropdown-content">
  {entities.map(r => (
    <div
      className="dropdown-item text-xl hover:bg-gray-400 w-full"
      key={r._id}
      onClick={() => handleClick(r._id)}
    >
      {r.chem_name}
    </div>
  ))}
</div>