React Native TextInput 不允许输入/文本更改

Posted 2023-04-18

【中文标题】React Native TextInput 不允许输入/文本更改

【英文标题】：React Native TextInput wont allow typing/text change

【发布时间】：2018-07-09 16:43:06

【问题描述】：

我有一个具有 TextInput 和 2 个按钮的组件。 1 个按钮递增，其他递减。我在 TextInput 上有一个 onChange 和 value，当单击按钮时，值会发生变化（输入中的文本增加或减少），但是通过 TextInput 输入值，它不起作用。它不允许输入任何内容。单击递增/递减按钮后，退格键甚至不起作用。以为我会把我的代码放在这里，看看是否有人能指出我所缺少的。我认为这与值上的 .toString() 有关，因为当我删除它时，我可以输入 TextInput，但我需要 .toString() 在那里才能输入数字并将初始值设为 @ 987654323@.

这是父组件：

  measurementValue = (measurement) => 
    this.setState( measurement );
  

  updateMeasurement = () => 
    this.measurementValue(this.state.measurement);
  

  decrement = () => 
    this.measurementValue(this.state.measurement - 1);
  

  increment = () => 
    this.measurementValue(this.state.measurement + 1);
  

  render() 
    return (
      <View>
        <MeasurementControl
          updateMeasurement=this.updateMeasurement
          decrement=this.decrement
          increment=this.increment
          measurement=this.state.measurement
        />
      </View>
    );
  

这是子组件：

export class MeasurementControl extends Component 

  render() 
    const 
      updateMeasurement,
      decrement,
      increment,
      measurement,
     = this.props;
    const styles = getStyles();

    const value = measurement === null
    ? ''
    : measurement;

    return (
      <View style=styles.container>
        <View style=styles.input>
          <TextInput
            style=styles.inputText
            keyboardType='numeric'
            placeholder='Enter #'
            onChangeText=updateMeasurement
            value=value.toString()
          />
        </View>
        <View style=styles.buttonWrapper>
          <Button
            buttonStyles=styles.decrementButton
            textStyles=styles.decrementButtonText
            onPress=decrement
          >
            __
          </Button>
          <Button
            buttonStyles=styles.incrementButton
            textStyles=styles.buttonText
            onPress=increment
          >
            +
          </Button>
        </View>
      </View>
    );
  

【问题讨论】：

删除 .toString() on value 是否有效？

@floor 实际上是这样，我实际上只是用这个发现编辑了我的初始帖子。

删除 toString 并将您的值常量行更改为 const value = measure ?测量：空

【参考方案1】：

您的TextInput 有一个名为onChangeText 的属性，每次写入输入时都会触发此事件

查看我的代码

<TextInput
    style=styles.inputText
    keyboardType='numeric'
    placeholder='Enter #'
    onChangeText=(text) => 

        if(text === "")
            updateMeasurement(null);
            return;
        

        if(isNaN(text))    //this will allow only number
            return;
        updateMeasurement(parseInt(text))
    
    value=value.toString()
/>

---

updateMeasurement = (value) => 
    this.measurementValue(value);

【讨论】：

这是最接近完全工作的状态。现在，当我在输入字段和退格键中有一个值所以什么都没有时，它会恢复为NaN，而不是它的初始值null。有没有办法让它再次显示为空白而不是NaN？

有趣。所以现在按退格键会使其成为0 而不是NaN，但是有没有办法让它只是空白以便我的占位符文本显示？

只需使用空字符串拨打电话updateMeasurement

有道理。谢谢！

我将其设置为返回 null 而不是空字符串，因为我上面的值函数将 null 设置为空字符串以供 SQL 表读取，这解决了我的所有问题。

【参考方案2】：

您缺少的部分是在更改时更新值

onChangeText=(text) => updateMeasurement(text)


updateMeasurement = (text) => 
    this.measurementValue(text);
  

【讨论】：

text 是一个设定值还是可以使用任何词？

可以是任何东西

你从回调中获取值并传递给你的函数

所以我实现了这个并遇到了一个问题。当我输入5 的值，然后使用增量按钮时，它只是将1 添加到5 (51111)，而不是将其更改为6。