Reactjs: как сбросить значение компонента из родительского с помощью хуков

Question

У меня есть компонент, который использует другой компонент, который вводит и выплевывает значения из текстового поля. Я могу получить значение, которое я ввожу из дочернего компонента, моя проблема заключается в сбросе значения дочернего компонента. Сейчас, когда я выполняю свою функцию onadditem, поле автозаполнения будет сохранять значение, прежде чем я нажму на кнопку надстройки для onadditem.

Это родительский компонент:

const [state, setState] = useState({
  id: props.spendItem.id,
  isNew: (props.spendItem.id == -1), 
  description: '', 
  vendor: ''
});

const onAddItem = (e) => {
  setState({...state, id: -1, description: '', isNew: true, vendor:''});
}

const setAutoCompleteValue = (e) => {
  setState({...state, vendor: e})
}

var newItem = (<div>
  <AutoComplete 
    items={vendors} 
    name='vendor' 
    value={state.vendor} 
    setValue={setAutoCompleteValue}
  />
  <button onClick={onAddItem}>+</button>
</div>);

Этокомпонент ввода

const AutoComplete = props => {
  const [typedValue, setTypedValue] = useState(props.value.name || '');

  useEffect(() => {
    props.setValue(getValue());
  }, [typedValue]);

  const onChange = (e) => {
  // i process my change for the value here
  }

  const getValue = () => {
    return typedValue;
  }

  return (
    <div>
      <input 
        id='auto_input' 
        name='name' 
        onChange={onChange} 
        value={typedValue}
      />
    </div>
  );
}

export default AutoComplete;

Answer 1

Это потому, что вы передаете значение родительского компонента дочернему элементу, но инициализируете его только в дочернем состоянии один раз и не обновляете дочерний элемент при следующем изменении родительского компонента. Таким образом, установка значения в родительском элементе больше не будет отражаться в дочернем элементе.

Поэтому вам необходимо решить, хотите ли вы сохранить состояние в родительском компоненте или внутри самого Autocomplete. Я не уверен, какие именно побочные эффекты вы хотите получить при изменении состояния, но вот основной пример того, как вы можете превратить автозаполнение в немой компонент и сбросить значение из родительского при добавлении элемента. Я удалил большую часть постороннего состояния из родительского:

const App = () => {
  const [vendor, setVendor] = React.useState("");
  const [items, setItems] = React.useState([]);

  const onAddItem = () => {
    setItems([...items, vendor]);
  }

  React.useEffect(() => {
    setVendor("");
  }, [items])

  return <div>
            <AutoComplete value={vendor} setValue={setVendor}/>
    <button onClick={onAddItem}>+</button>
    <div style={{ padding: 25}}>
      {items.map(item => <div>{item}</div>)}
    </div>
            </div>
}

const AutoComplete = ({ value, setValue}) => {

const onChange = (e) => {
  setValue(e.target.value)
}

const getValue = () => {
  return typedValue;
}
  return (
    <>
        <input id='auto_input' name='name' onChange={onChange} value={value}/>
    </>
)
}

ReactDOM.render(<App/>, document.getElementById("root"))

Codepen здесь .