如何在 OnChangeText 中向我的组件 inputText 添加两个状态

Question

我需要向我的 onChangeText 添加两个参数，但我不知道该怎么做，

我的组件是：

handleChangePhone = (value) => {
    this.setState(prevState => ({ phone: normalizePhone(value, prevState.phone) }))
}
handleChangeDDD = (value) => {
    this.setState(prevState => ({ ddd: normalizeDDD(value, prevState.phone) }))
}
setPasswordVisibility = () => {
    this.setState({ hidePassword: !this.state.hidePassword })
}

render() {
    const { value, onChangeValue } = this.props;
    return (
        <>
            <TextInput
                {...this.props}
                onChangeText={onChangeValue, this.props.phone ? this.handleChangePhone : this.props.ddd ? this.handleChangeDDD : onChangeValue}
                value={value}
                defaultValue={this.props.phone ? this.state.phone : this.props.ddd ? this.state.ddd : ''}
                placeholder={this.props.placeholder ? this.props.placeholder : ''}
                selectionColor='#6730EC'
                keyboardType={this.props.keyboard ? this.props.keyboard : 'default'}
                maxLength={this.props.maxLen ? this.props.maxLen : 100}
                style={[styles.input,
                {
                    width: this.props.width ? this.props.width : 244,
                    marginLeft: this.props.marginL ? this.props.marginL : 0,
                    marginRight: this.props.marginR ? this.props.marginR : 0,
                    marginTop: this.props.marginT ? this.props.marginT : 0,
                    textAlign: this.props.alignText ? this.props.alignText : 'left',
                    fontSize: this.props.fontSize ? this.props.fontSize : 15,
                }]}
                secureTextEntry={this.props.type == 'security' ? this.state.hidePassword : false}
                ref={(input) => this.props.inputRef && this.props.inputRef(input)}
                autoFocus={this.props.focus ? this.props.focus : false}
            //onSubmitEditing={this.handleTitleInputSubmit}
            />
            <Feather style={[styles.eye,
            {
                marginTop: this.props.marginT ? this.props.marginT : 0,
            }]}
                name={(this.state.hidePassword) ? 'eye' : 'eye-off'}
                size={this.props.eye ? 24 : 0}
                color="#6730EC"
                onPress={this.setPasswordVisibility}
            />
        </>

HandleDDD 和 Handle CelNumber 函数在我的参数 phone 为真时被调用，但我需要使用 onChangeValue 来改变状态，但我这样做的方式不起作用

你能帮帮我吗？

Answer 1

从你的代码看来：

你从 this.props

value

onChangeValue

TextInput 表示 phone 数字或 DDD
我们根据 this.props 是否包含 phone 或 ddd

基于这些观点，我实际上并不认为您需要将输入值存储在该组件的状态中。这可以是一个受控组件，您可以在其中回调 this.props.onChangeValue 每次更改。

我不知道你的 normalizePhone 和 normalizeDDD 函数在做什么。当您获得通过验证的值时，您可能只想回调父级。但这与我在这里看到的不兼容，即您将 TextInput 的 value 设置为 this.props.value。

handleChangeText = (text) => {
    const prevText = this.props.value;
    const normalized = this.props.phone
      ? normalizePhone(text, prevText)
      : this.props.ddd
      ? normalizeDDD(text, prevText)
      : text;
    this.props.onChangeValue(normalized);
  };

  render() {
    return (
      <>
        <TextInput
          {...this.props}
          onChangeText={this.handleChangeText}
          value={this.props.value}
          defaultValue={""}
....

如何在 OnChangeText 中向我的组件 inputText 添加两个状态

How to add two states to my component inputText in OnChangeText

javascript

components

reactjs

react-native

react-component