从 TextIput 获取值

Question

我希望能够在用户按下 enter/return 后检索文本的值。

我尝试了以下...

class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text:''
        }
    }

    callTextSubmit = (val) => {
        console.log('callTextSubmit ', val);
    };

    render() {              
        return (
            <View>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(text) => this.setState({ text })}
                    onSubmitEditing={(text) => this.callTextSubmit(text)}
                    value={this.state.text}
                />
            </View>
        )
  }
}

这 returns 以下...来自控制台日志。

Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}
>[[Handler]]:Object
>[[Target]]:Class
>[[IsRevoked]]:false

我想从文本输入中访问值，有解决方法吗？谢谢

Answer 1

onSubmitEditing 处理程序的参数是事件，而不是当前输入。

由于每次更改 TextInput 时都设置了状态变量 text，因此您可以只在您的状态中使用 text 变量。

callTextSubmit = () => {
  console.log('callTextSubmit ', this.state.text);
};

Answer 2

由于您使用此行将 TextInput 的值添加到状态

 onChangeText={(text) => this.setState({ text })}

合理的方法是从添加到视图的按钮 (TouchableOpacity/TouchableHighlight) 上的 onPress 函数的状态中获取值，如下所示：

<TouchableOpacity onPress={()=>console.log(this.state.text)}>
  <Text>
    Enter
  </Text>
</TouchableOpacity>

这是您的组件的代码

class HomePage extends Component {
constructor(props) {
    super(props);
    this.state = {
        text:''
    }
}

callTextSubmit = () => {
    console.log(console.log(this.state.text));
};

render() {              
    return (
        <View>
            <TextInput
                style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                onChangeText={(text) => this.setState({ text })}
                value={this.state.text}
            />

            <TouchableOpacity onPress={()=>console.log(this.state.text)}>
               <Text>
                   Enter
               </Text>
           </TouchableOpacity>
        </View>
    )

}

从 TextIput 获取值

Get the value from TextIput

javascript

textinput

reactjs

react-native