时间戳

首页 > 解决方案 > 在 React 中的数据预览中显示 PhoneInput 值

javascript - 在 React 中的数据预览中显示 PhoneInput 值

问题描述

我正在尝试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 的新手。]

标签： javascriptreactjsformsevents

解决方案

所以这就是你要做的事情，首先你需要保持输入的状态，所以你必须稍微修改一下状态

   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);
      }
    );
  };

您要做的下一件事是将参数传递给函数。（因为在您提供的演示中，如果字段为空，则不会显示。所以我决定通过检查该字段是否为空来模仿）

        <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 => {

代码沙盒：在这里

推荐阅读