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

Posted 2023-02-23

【中文标题】如何在 OnChangeText 中向我的组件 inputText 添加两个状态

【英文标题】：How to add two states to my component inputText in OnChangeText

【发布时间】：2021-05-11 10:53:00

【问题描述】：

我需要在我的 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 在我的 param phone 为 true 时调用，但我需要在 onChangeValue 离开的情况下更改状态，但我这样做的方式不起作用

你能帮帮我吗？

【问题讨论】：

请向我们展示整个组件并解释为什么需要这些组件：onChangeText=onChangeValue, this.props.phone ? this.handleChangePhone : this.props.ddd ? this.handleChangeDDD : onChangeValue 和 ref=(input) => this.props.inputRef && this.props.inputRef(input)

【参考方案1】：

根据您的代码，看起来像：

你从this.props 获得道具value 和onChangeValue TextInput 代表电话号码或 DDD 根据this.props 是否包含phone 或ddd，我们知道它是电话号码还是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=""
....