Просто спросить о функции в кнопке

Question

Я новичок в ReactJs. Я столкнулся с проблемой при создании приложения. мой соответствующий код

this.state={
  displaySocialInputs: false,
}

Я переключаю значение с помощью кнопки. Кнопка работает хорошо, но не может понять логику, использованную в кнопке.

<button
  type="button"
  onClick={() => {
    this.setState(prevState => ({
      displaySocialInputs: !prevState.displaySocialInputs
    }));
  }}
  className="btn btn-light"
>
  Add Social Networks Links`enter code here`
</button>

Я хочу спросить, как кнопка знает значение, переданное enter code here s "prevState", чтобы изменить значение состояния. мы не передаем никакой ценности. Надеюсь, вы поймете вопрос.

Answer 1

Я думаю, что это работает, потому что setState - это обещание, поэтому вы используете ответ обещания для переключения значения. Я представляю, что prevState содержит предыдущее состояние компонента. Я предпочитаю делать это по старинке:

this.setState({
   displaySocialInputs:!this.state.displaySocialInputs
})

Answer 2

Здесь происходит переключение:

displaySocialInputs: !prevState.displaySocialInputs

! Оператор меняет значения с истинного на ложное и наоборот, т.е.:

! TRUE = FALSE ! ЛОЖЬ = ИСТИНА

Answer 3

В вашем случае преувеличение не обязательно.

<button
 type="button"
 onClick={() => {
 this.setState({ displaySocialInputs: !this.state.displaySocialInputs });
 }}
className="btn btn-light"
>

Но я рекомендую вам избегать создания функций внутри вашего jsx. Создайте функцию вне вашего метода рендеринга и вызовите ее в вашем jsx

handleChange = () => {
  this.setState({ displaySocialInputs: !this.state.displaySocialInputs })
}

И в вашем рендере

<button
 type="button"
 onClick={this.handleChange}
 className="btn btn-light"
>

Answer 4

Этот фрагмент в вашем коде:

prevState => ({
  displaySocialInputs: !prevState.displaySocialInputs
})

... это обратный вызов. По сути, вы говорите структуре: «Если вы дадите мне текущее состояние и назовете его prevState, вот как я хочу его преобразовать».

Вы можете думать об этом следующим образом:

1. Изначально вы создаете свой компонент и устанавливаете displaySocialInputs: false в качестве исходного состояния. Компонент запоминает это.
2. При нажатии кнопки вызывается setState.
3. setState извлекает текущее состояние и вызывает ответный вызов, который вы ему дали, передавая состояние в качестве параметра prevState.

Благодаря этому шаблону вам не нужно задавать ему состояние самостоятельно: фреймворк делает это за вас.