如何清除 SlideTextInput（自定义 TextInput 组件）中的输入？答案

【问题标题】：How to clear input in SlideTextInput (custom TextInput component)?如何清除 SlideTextInput（自定义 TextInput 组件）中的输入？
【发布时间】：2017-10-26 22:59:53
【问题描述】：

如果问题有点愚蠢，当然很抱歉。

在我正在开发的应用程序中，用户应该能够在 TextInput 上滑动。由于 TextInput 只听水龙头，我使用了这个要点：https://gist.github.com/MikeShi42/87b65984f0a31e38d553cc056fcda017 （顺便说一句 @Michael Shi 非常感谢）

但是，一旦我将 TextInput 更改为 SlideTextInput，清除按钮就停止工作。

clearInput() {
    this.setState({text: ''});
}

render() {
    return (
    <Button name='clear' action={this.clearInput} />
    <SlideTextInput 
        style={styles.input} 
        ref='input'
        onChangeText={(text) => this.setState({text: text})}
        placeholder={this.state.placeholder} 
        value={this.state.text} 
        multiline={true} 
        returnKeyType='done' 
        blurOnSubmit={true} />
    )
}

我还尝试了this.refs.input.setNativeProps({text: ''});，而不是仅仅传递一个新的value 属性（这对于正常的TextInput 来说应该——而且已经足够了），然后调用forceUpdate()，但再次无济于事。与原始 TextInput 组件相比，SlideTextInput.js 没有太大变化，但我一定遗漏了一些可以解释这种不良行为的东西？

UPD：最后答案很简单。 SlideTextInput 没有像原始 TextInput 那样将组件链接到其本地对应项 (ref={this._setNativeRef})，而是将其引用到字符串 (ref="input")。我把它改回来了，瞧。

【问题讨论】：

标签： react-native

【解决方案1】：

查看代码似乎没有将 value 道具发送到原始 TextInput。它正在扩展 TextInput 但它返回另一个组件而不发送 value 道具。

试试：

this.refs.input.setText('');

【讨论】：

您好，感谢您的回答。 SlideTextInput 实际上有一个道具text={this.props.value}，我刚刚发现了另一件事——如果我从另一个按钮返回屏幕，清除按钮确实有效（但它与 textinput 的 selectionState 无关。
clearInput 真的被解雇了吗？如果您添加日志或警报，它是否每次都会执行？
哦，是的，这是我检查的第一件事 :) 我在标题中添加了<Text>{this.state.text}</Text>，以查看 this.state.text 是否在按下按钮后被成功清除——它是，但是输入本身不是。最令人惊讶的是，如果您返回到此屏幕，它实际上确实很清楚，请查看screencast
这很奇怪。就像状态和输入只有在你玩它时才会同步。您是否尝试过单击输入，然后单击按钮？只是看看这是否绑定了值。
实际上恰恰相反——因为 SlideTextInput 中缺少 native/JS 链接（请参阅我更新的帖子），这些值仅在初始安装后绑定 (componentDidMount: function() {this._lastNativeText = this.props.value;})。这解释了为什么按钮一开始有效，而在您编辑文本后停止工作。

【解决方案2】：

最后的答案很简单。 SlideTextInput 没有像原始 TextInput 那样将组件链接到其本地对应项 (ref={this._setNativeRef})，而是将其引用到字符串 (ref="input")（这与我的代码中的道具无关，而是关于 SlideTextInput .js 文件本身）。我把它改回来了，瞧。

【讨论】：