React Native 明文多个 TextInput 框

Posted 2023-04-18

【中文标题】React Native 明文多个 TextInput 框

【英文标题】：React Native clear text multiple TextInput boxes

【发布时间】：2016-02-24 09:41:30

【问题描述】：

我在 facebook React Native 页面上找到了示例代码，该页面显示了如何使用 setNativeProp 在单击时清除文本，但我看不到如何使用多个文本框来执行此操作。代码如下：

var App = React.createClass(
  clearText() 
    this._textInput.setNativeProps(text: '');
  ,

  render() 
    return (
      <View style=styles.container>
        <TextInput ref=component => this._textInput = component
               style=styles.textInput />
        <TouchableOpacity onPress=this.clearText>
          <Text>Clear text</Text>
        </TouchableOpacity>
      </View>
    );
  
);

ref 似乎在函数中是固定的，因此将始终以相同的 TextInput 框为目标。如何更改函数以针对我指定的任何 TextInput 框？

【参考方案1】：

这应该可行。请注意，TextInput 上的 ref 必须是您从 clearText 函数调用的那个。

var App = React.createClass(
  clearText(fieldName) 
    this.refs[fieldName].setNativeProps(text: '');
  ,

  render() 
    return (
      <View style=styles.container>
        <TextInput ref='textInput1' style=styles.textInput />
        <TouchableOpacity onPress=() => this.clearText('textInput1')>
          <Text>Clear text</Text>
        </TouchableOpacity>
        <TextInput ref='textInput2' style=styles.textInput />
        <TouchableOpacity onPress=() => this.clearText('textInput2')>
          <Text>Clear text</Text>
        </TouchableOpacity>
      </View>
    );
  
);

更新了我的答案以清除不同的字段。

【讨论】：

但是你的 onPress 没有值？您如何将它与另一个 onPress 区分开来以清除不同的文本输入？您仍然需要创建两个单独的函数。您能否举一个带有两个文本输入和两个可触摸不透明按钮的示例来演示它如何仅使用一个功能？

OK 看起来是正确的，但实际上并没有用。它对你有用吗？

你必须这样做 this.refs[fieldName].setNativeProps(text: '');然后它就起作用了。谢谢:)

是的，那里有一个错字。更新了我的答案。

【参考方案2】：

你也可以使用类似这样的方法来清除 TextInput 的文本。

clearText(fieldName) 
  this.refs[fieldName].clear(0);
,