如何链接两个 React-Admin 组件

Question

当用户更改 React-Admin 表单中的属性名称选择时，如何自动清除属性值字段？我附加的图像显示，当我更改属性名称选择时，属性值字段仍然保留相同的先前输入，但我实际上想清除它。属性名称是 a，属性值是 a

不知道还能做什么

Answer 1

尝试这样的事情：

import { useFormContext, useWatch } from "react-hook-form"
import { TextInput, TextInputProps } from 'react-admin'
...
const AttributeValueInput = (props: TextInputProps) => {
  const { source } = props // "AttributeValue"  
  
  const { formState, getFieldState, resetField } = useFormContext()
  const { isDirty } = getFieldState("AttributeName", formState) 

  const attrName = useWatch({ name: "AttributeName" })

  useEffect(() => {
    if (isDirty) resetField(source)       
  }, [source, isDirty, attrName, resetField])      

  return <TextInput { ...props } />
}

Answer 2

如果我理解你的问题，你想在更改属性名称时清除属性值。

首先你需要对你的属性值进行状态 示例： const [attributeName, setAttributeName] = useState('');

其次，您需要将 onChange 事件添加到下拉菜单（属性名称），然后处理此事件并使用 setAttributeName('') 更新状态

const [attributeName, setAttributeName] = useState('');
const handleChange = () => {setAttributeName('')}
const App =() => {
return(
<>
<input name="name" value={attributeName}>
<select onChange={handleChange}>

   <option value="option1">option 1</option>

   <option value="option2">option 2</option>

   <option value="option3">option3</option>

 </select>
</>
)
}

如果您需要更多帮助，请告诉我:)