Блог

Главная - Вопросы по программированию - Реагируйте На Крючки При Синхронизации Обмена

Реагируйте На Крючки При Синхронизации Обмена

#javascript #reactjs #react-hooks #state

Вопрос:

Я передаю свое приложение из модели класса в крючки, и в моем коде у меня есть раскрывающийся список, который при выполнении метода 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?.

Комментарии:

1. Я не понимал, как компонент класса с состоянием и собственным методом this.chargeInfo стал основываться на крючке с chargeInfo помощью реквизита. Не могли бы вы, пожалуйста, добавить более подробную информацию?

2. Метод компонента класса теперь является навязчивым в моем проекте, я хочу сделать то же самое, но в моем крючке. Я хочу, чтобы сначала компонент сделал props.changeSelectedFilter, а затем props.changeInfo() в режиме синхронизации.

Ответ №1:

Возможно, вам придется использовать крючок состояния следующим образом:

 // 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 для получения дополнительной информации

Ответ №2:

Я решил с помощью 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" />
)
Метки: