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 here.