Question

我面临设置状态onChange的问题。

后面的handleChangeInputMobile仅给出当前值，而不给出当前目标。

对于手机号码字段验证，我尝试使用PhoneInput中的react-phone-number-input。

但是我面临着更新状态onChange的问题。

class Form extends Component {
  state = {
    data: {
      firstName: "",
      lastName: "",
      mobile: "",
      email: "",
      password: "",
      confirm_password: ""
    },
    errors: {},
    disabled: true
  };

  handleChangeInputMobile({ currentTarget: input }) {
    // I am not able to get current target here. It gives only value

    const data = { ...this.state.data };

    data[input.name] = input.value;
    this.setState({ data });
  }

  render() {
    const { mobile } = this.state.data;
    <Mobile
      handleChangeInputMobile={this.handleChangeInputMobile}
      mobile={mobile}
    />;
  }
}
export default Form;

import PhoneInput from "react-phone-number-input";

class Mobile extends Component {
  render() {
    const { handleChangeInputMobile } = this.props;
    const { mobile } = this.props;
    return (
      <div>
        <PhoneInput
          country="IN"
          id="mobile"
          name="mobile"
          value={mobile}
          onChange={handleChangeInputMobile}
        />
      </div>
    );
  }
}

export default Mobile;

Answer 1

尝试将input.value更改为e.target.value，如下所示：

handleChangeInputMobile = (e) => {

 this.setState({
    [e.target.id]: e.target.value
  })

}

Answer 2

根据docs，

来自{{1}的onChange的

PhoneInput道具直接与react-phone-number-input一起使用，您需要显式发送value。

name

您的onChange={mobile => handleChangeInputMobile(mobile,"mobile")}函数应该是

handleChangeInputMobile

注意：您正在直接突变handleChangeInputMobile(value,key) { this.setState(prevState => ({data: {...prevState.data, [key]: value}}), ()=> console.log(this.state)) }，应使用state并更新状态，如上所示。

在您的prevState组件中，您忘记了Form，可能是错字。

Demo

Answer 3

您只能使用react-phone-number-input访问该值，因此必须将密钥作为参数传递。

handleChangeInputMobile = (value, key) => {
 this.setState({ [key]: value });
}

<PhoneInput
  country="IN"
  id="mobile"
  name="mobile"
  value={mobile}
  onChange={value => handleChangeInputMobile(value, 'mobile')}
/>

如何在React中获取对象的键名并更新相应键的状态

3 个答案: