如何使用 redux 在 React Native 中清除发送按钮上的 TextInput答案

【问题标题】：How to clear TextInput on send button in React native with redux如何使用 redux 在 React Native 中清除发送按钮上的 TextInput
【发布时间】：2019-10-16 08:42:27
【问题描述】：

我正在使用带有 redux 的 react native 开发聊天应用程序，其中消息通过发送按钮发送。但是，每当我在点击发送按钮时发送消息时，TextInput 就不会被清除。我想在点击发送按钮时清除TextInput 字段。在这里，我在 redux 中工作，所以我不想将 state 与 value 一起使用。

代码如下：

class Chat extends Component {

  componentWillMount() {
    this.props.fetchChat(this.props.receiverId);  
}

message(text) {
  this.props.writeMsg(text);    
}
onSend = () => {

  const { userId , receiverId, text } = this.props;
  this.props.sendMessage({userId , receiverId, text});
}

  render() {

    return (
      <View style={{ flex: 1 }}>

            <FlatList 
              inverted={-1}
              style={styles.list}
              extraData={this.props}
              data={this.props.convo}
              keyExtractor = {(item) => {
                return item.id;
              }}
              renderItem=   
              <ChatItem value={this.renderItem} />           
              />

             <MessageInput 
             onChangeText={text => this.message(text)}
             onPress={this.onSend }
            />          
      </View>
    );
  }
}

这是组件MessageInput的代码：

  <View style={inputContainer}>
            <TextInput style={inputs}
                placeholder="Write a message..."
                onChangeText={onChangeText}
              />
          </View>

            <TouchableOpacity style={btnSend} onPress={onPress }>
              <Icon
            name='send'
            type='MaterialIcons'
            color='#fff'
            style={iconSend}
            />  
            </TouchableOpacity>

【问题讨论】：

嗯，在 MessageInput 组件中不使用状态/值有什么好处？

标签： reactjs react-native redux react-native-textinput

【解决方案1】：

您可以使用ref 清除Chat 中的值。

在你的构造函数中添加一个新的引用

constructor(props) {
  super(props);
  this.textInput = React.createRef();
}

将ref 传递给MessageInput。

render() {
  ...
  <MessageInput 
    onChangeText={text => this.message(text)}
    onPress={this.onSend }
    ref={this.textInput}
  />
  ...  
}

修改MessageInput（我假设它是一个功能组件）

const MessageInput = (props, ref) => (
  ...
  <TextInput style={inputs}
    placeholder="Write a message..."
    onChangeText={onChangeText}
    ref={ref}
  />
  ...
)

最后切换回Chat组件，更新onSend

onSend = () => {
  const { userId , receiverId, text } = this.props;
  this.props.sendMessage({userId , receiverId, text});
  this.textInput.current.clear(); // Clear the text input
}

【讨论】：

【解决方案2】：

您可以尝试在发送消息后清除text 属性，（如果文本属性是TextInput 中呈现的内容）：

onSend = () => {

 const { userId , receiverId, text } = this.props;
 this.props.sendMessage({userId , receiverId, text});
 this.message('');
}

或

 onSend = () => {

  const { userId , receiverId, text } = this.props;
  this.props.sendMessage({userId , receiverId, text});
  this.props.writeMsg('');   
}

【讨论】：