Отображение значения PhoneInput в предварительном просмотре данных в React

Question

Я пытаюсь отобразить значение PhoneInput в предварительном просмотре данных (React), используя обработчик событий handleOnChangePhoneInput. Как мне заставить это работать?

Вот исходный код .

Я хочу отобразить значение «номер телефона», введенное пользователем в «предварительном просмотре данных». "лист прямо под кнопкой" Отправить "в демоверсии. Например, когда кто-то вводит значение «имя» и нажимает «Отправить», имя отображается в предварительном просмотре данных, но я не могу заставить его работать с «номером телефона» и «данными о рождении».

Демо

Компонент

  <PhoneInput
            name="phoneNumber"
            type="text"
            country={"us"}
            enableAreaCodes={true}
            onlyCountries={["us"]}
            areaCodes={{ us: ["000"] }}
            inputProps={{
              name: "phone",
              country: "us",
              required: true,
              autoFocus: true
            }}
            value={this.state.phone}
            onChange={this.handleOnChangePhoneInput}
            inputStyle={{
              width: "230px",
              height: "45px"
            }}
          />

Событие

  handleOnChangePhoneInput = value => {
    this.setState({ phone: value }, () => {
      return this.state.phone;
    });
  };

[Спасибо! Я новичок в React.]

Answer 1

Итак, вот как вы это сделаете. Прежде всего, вам нужно поддерживать состояние ваших входов, чтобы вам пришлось немного изменить состояние

   state = {
        firstName: "",
        lastName: "",
        phone: "",
        emailAddress: "",
        eligibleAge: false,
        max: new Date(
          new Date().getFullYear() - 21,
          new Date().getMonth(),
          new Date().getDate()
        ),
        min: new Date(
          new Date().getFullYear() - 120,
          new Date().getMonth(),
          new Date().getDate()
        ),
        selectedDate: ""
      };

, следующее, что вы хотите сделать создать три дополнительных прослушивателя событий, один для всех текстовых входов и один для флажка и один для календаря, это можно объединить в один, но для простоты давайте оставим его отдельно

   // Text Inputs
    onChange = e => {
        console.log(e);
        this.setState(
          {
            ...this.state,
            [e.fieldProps.name]: e.fieldProps.value
          },
          () => {
            console.log(this.state);
          }
        );
      };
   // CheckBox
  onCheckBoxChange = e => {
    this.setState(
      {
        ...this.state,
        eligibleAge: !this.state.eligibleAge
      },
      () => {
        console.log(this.state);
      }
    );
  };
  // Calender
  onSelect = e => {
    var SelectedDate =
      e.getDate() + "-" + (e.getMonth() + 1) + "-" + e.getFullYear();
    this.setState(
      {
        ...this.state,
        selectedDate: SelectedDate
      },
      () => {
        console.log(this.state);
      }
    );
  };

следующим, что вы хотите чтобы сделать, это передать аргументы функции. (поскольку в демонстрации, которую вы предоставили, если поле пусто, оно не отображается. Поэтому я решил имитировать c, проверив, пусто ли это поле)

        <Form
      onSubmitStart={() =>
        this.props.onSubmitStart({
          ...(this.state.firstName !== "" && {
            firstName: this.state.firstName
          }),
          ...(this.state.lastName !== "" && {
            lastName: this.state.lastName
          }),
          ...(this.state.emailAddress !== "" && {
            emailAddress: this.state.emailAddress
          }),
          ...(this.state.phone !== "" && { phone: this.state.phone }),
          selectedDate: this.state.selectedDate,
          eligibleAge: this.state.eligibleAge
        })
      }
    >

и в родительском компоненте (index.js) вы просто измените

handleSubmitStart = ({serialized}) => {

на это:

handleSubmitStart = serialized => {

CodeSandbox : здесь

Answer 2

ваша функция дескриптора должна выглядеть примерно так:

const handleOnChangePhoneInput = value => {
    this.setState({ phone: value });
  };

, а затем, если вы хотите показать значение, создайте функцию onClick внутри кнопки отправки, например:

const handleOnSubmit=()=>{
 this.setState({visibleTelephone:true})
}

и в вашем компоненте вам нужно добавить, где будет отображаться значение:

<div>
{this.state.visibleTelephone?this.state.phone:null}
</div>