Question 264253 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to Link Two React-Admin Components

How can I make the Attribute Value field clear automatically when the user changes the Attribute Name selection in a React-Admin form? The images I have attached show that when I changed the Attribute Name selection the Attribute Value field still retains that same previous input but I actually want to clear it. Attribute Name is a and Attribute Value is a
enter image description here
enter image description here

Not sure what else to do

Tags:

2

Answers


  1. 0

    if i understand your question, you want to clear the Attribute value when you change attribute name.

    first you need to make state to your attribute value
    exemple:
    const [attributeName, setAttributeName] = useState(”);

    Second you need to add onChange event to your dropdown menu (attribute name) then you handle this event and update the state with 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>
</>
)
}

    let me know if you need more help 🙂

    Login or Signup to reply.
  2. 0

    Try something like this:

    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 } />
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search