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"))

代码笔在这里。