标签: textinput

React Native TextInput onSubmitEnding 不起作用 - 创建合成事件

期望状态

我在 react native 中有两个文本输入字段,每个字段的最终输入都需要附加到数组中。因此我使用 onSubmitEditing 因为否则如果我使用 onChangeText 用户输入的每个字符都会附加到数组中。

错误

onSubmitEditing 调用父组件中的函数并给出以下错误

“ExceptionsManager.js:84 警告:出于性能原因重用此合成事件。如果您看到这一点,则表示您正在访问已nativeEvent发布/无效的合成事件的属性。这被设置为 null。如果您必须保留原始周围的合成事件,使用 event.persist()。”

我尝试将函数移动到同一个文件,这并不理想,但我仍然返回这个数组而不是文本输入。数组中似乎没有任何有用的东西。

“[合成事件]”

代码

子组件

 <TextInput
    style={styles.signupInput}
    onSubmitEditing={(val) => this.props.saveFriends(val)}
    autoCorrect={false}
    autoFocus={true}
    placeholder={'friend one'}
    placeholderTextColor={'white'}
  />
  <TextInput
    style={styles.signupInput}
    onSubmitEditing={(val) => this.props.saveFriends(val)}
    autoCorrect={false}
    autoFocus={true}
    placeholder={'friend two'}
    placeholderTextColor={'white'}
  />
Run Code Online (Sandbox Code Playgroud)

父组件

  saveFriends = (val) => {
    this.setState({
      friends: [
        ...this.state.friends,
        val
      ]
    })
}
Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激!

javascript textinput reactjs react-native

0
推荐指数
1
解决办法
1571
查看次数

如何在 TextInput 中添加前缀 - React Native

我想在我的文本输入中添加前缀,我想知道如何做到这一点。

文本输入代码

        <TextInput
          style={styles.inputs}
          placeholder="Mobile Number"
          keyboardType="number-pad"
          underlineColorAndroid="transparent"
          onChangeText={mobile_number => this.setState({mobile_number})}
        />
Run Code Online (Sandbox Code Playgroud)

我想要的最终输出

维

textinput react-native react-native-ios

0
推荐指数
1
解决办法
1万
查看次数

在Textinput中反应数字的本机MAX值

我正在为 react native 中的数字创建一个输入字段。在文本字段中,我们可以对字符使用maxLength。但我想要这个字段中数字的最大值。

例如,当我设置数字限制为 10 时,用户不能输入数字的 11。

我不知道该怎么做。请写下您的宝贵意见或答案。先感谢您

numbers textinput reactjs react-native

0
推荐指数
1
解决办法
3882
查看次数

在 Web 上的 React Native 中单击时文本输入的边框

我正在使用 React Native 和 TextInputs。当我点击它时,TextInput 周围有一个边框。当我点击关闭时,边框消失。这不会发生在 Android 上,但会发生在网络上。下面是一些图片。我怎样才能摆脱这个边界?

未点击时:

2

点击时:

1

浏览器:Chrome 84
操作系统:Windows 10
Expo 版本:3.26.1
React Native 版本:
4.12.0 Nodejs 版本:v12.18.3 Npm
版本:6.14.6

最小可重现示例:https : //snack.expo.io/@ketzoomer/dfbbdf

import * as React from 'react';
import { View, Text, TextInput } from 'react-native';

class Sign_Up extends React.Component {

    constructor() {
        super();
        
        this.state = {
        };
    }

    render() {
        return (
            <View>
                <Text>
                    First Name:
                    <TextInput
                        style={{ paddingVertical: 0, borderBottomWidth: 1, marginLeft: 5 }}
                        value={this.state.firstName}
                        onChangeText={(firstName) => this.setState({ firstName: firstName })}
                        placeholder="First …
Run Code Online (Sandbox Code Playgroud)

textinput react-native

0
推荐指数
2
解决办法
2014
查看次数

React Native-如何验证Textinput的正确性?

如何验证Textinput的正确性?我想使用自定义窗体验证以及验证后文本组件中的显示错误来正确验证窗体,但是如何?拜托,伙计们给我看个例子!

forms validation components textinput react-native

-1
推荐指数
1
解决办法
2936
查看次数