onChange 属性值未定义

Question

我正在使用 reactprime TreeSelect。我想通过编辑名为

returnArray

的变量来创建一个数组，并通过道具将其发送到主要组件的状态。但是

onChange

似乎没有定义。同样的过程在

OnValueChanged

.

主要成分：

return(
          <SubComponent>
            onChange={(val) => {
              console.log("here")
            if (val)
              setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
              });
          }}
          </SubComponent>
);

子组件：

  const nodeStateCh = (e) => {
    setSelectedNodeKeys(e.value)
    let rArray= []
    rArray.push("test")
    if (props.onChange) {  //undefined...
      props.onChange(returnArray)
    }
    
  }



  return (
    <div className="card flex justify-content-center">
      <TreeSelect
        value={selectedNodeKeys}
        onChange={nodeState}
        options={nodes}
        metaKeySelection={false}
        filter
        className="md:w-20rem w-full"
        selectionMode="checkbox"
        display="chip"
        placeholder="Select Items"
      >
        {' '}
      </TreeSelect>
    </div>
  )

Answer 1

你把你的 onChange 作为一个孩子传递，而不是作为一个参数，这就是为什么 porpos 是空的。

而不是这个：

 <SubComponent>
     onChange={(val) => {
         console.log("here")
         if (val)
           setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
           });
     }}
 </SubComponent>

应该是这样的：

 <SubComponent
     onChange={(val) => {
         console.log("here")
         if (val)
           setFormDataDetails({
                ...formDataDetails,
                [item.NS_CI_ID]: val,
           });
     }}
 />

然后，您将此函数作为参数传递给 onChange。

在您的方法中，您也将其作为参数传递，但称为子参数的特殊参数，但它用于不同的目的。

您可以在文档中阅读更多相关信息： https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children