从 TextIput 中获取值答案

【问题标题】：Get the value from TextIput从 TextIput 中获取值
【发布时间】：2019-01-15 00:29:54
【问题描述】：

我希望能够在用户按下回车键后检索文本的值。

我尝试了以下...

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>
        )
  }
}

这会从控制台日志中返回以下内容。

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

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

【问题讨论】：

onSubmitEditing 处理程序的参数是事件。你不能只使用状态变量吗？ console.log('callTextSubmit ', this.state.text);
回调，onChangeText 是一个事件处理程序，接受合成事件而不是文本值。
是的，这是有道理的。我只是想替换onChangeText，所以每次我输入字母时它都不会调用。我想在点击进入后设置状态。

标签： javascript reactjs react-native textinput

【解决方案1】：

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

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

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

【讨论】：

谢谢，这行得通。但由于某种原因，onChangeText 被称为我输入的每个字母。有没有办法只在我按回车后设置状态？
@SGhaleb 太好了！您也许可以使用onKeyPress and figure out if the keypress was the key you want。但是，最好在您键入的每个字母上运行onChangeText，否则value={this.state.text} 将不起作用。
感谢您的帮助。我会调查的。

【解决方案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>
    )

}

【讨论】：

你可以用onPress={()=>this.callTextSubmit}替换它
是的，我刚刚意识到。对不起，没有重点。谢谢你。