React Hooks Onchange同步

Question

我正在将我的应用程序从类模型传递到钩子，并且在我的代码y中有一个下拉列表，当执行onChange方法时，它会这样做：

filter(event)
{
    this.setState({
        selectedFilter: event.target.value
      },() => { this.chargeInfo(); });
}

在我的类模型中工作得很好，但我不知道如何使用钩子来做到这一点，我通过属性传递了方法chargeInfo()和变量selectedFilter，因为这个组件是一个子组件，所以我拥有的是以下代码：

<Dropdown onChange={onChangeDropdown} />

const onChangeDropdown = function(event)
{
    props.changeSelectedFilter(event.target.value);//this do setSelecedFilter in the parent
    props.chargeInfo();//this is the method of the parent that do something
}

如何在先执行props.changeSelectedFilter，然后执行props.chargeInfo的同步模式下调整它？

Answer 1

我用useEffect解决了这个问题：

useEffect(
    () => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    props.chargeInfo();}, [props.selectedFilter]
    )

const onChangeDropdown = function(event)
{
    props.changeSelectedFilter(event.target.value);
}

return(

    <Dropdown style={{ marginRight: 10, }} value={props.selectedFilter} options={filters} 
    onChange={onChangeDropdown} optionLabel="name" placeholder="Filter by" />
)

Answer 2

您可能需要像这样使用State Hook：

// setting up the default dropdown value
const [dropdownValue, setDropdownValue] = useState('Some Value');

// later, setting a new dropdown value
setDropdownValue('New Value')

有关更多信息，请参阅https://reactjs.org/docs/hooks-state.html