在React Native中使用NativeBase TextArea，如何获取用户输入内容？

嘿，我来帮你搞定这个问题！在React Native里要获取输入框和TextArea的内容，咱们可以通过**组件状态（state）**来管理输入值，配合输入组件的onChangeText事件实时更新状态，最后点击提交按钮时就能轻松拿到这些内容啦。具体实现步骤如下：

1. 初始化组件状态 #

首先在你的类组件里初始化state，用来存储用户输入的邮箱和消息内容：

constructor(props) {
  super(props);
  this.state = {
    email: '',
    message: ''
  };
}

2. 给输入组件绑定 onChangeText 事件 #

给<Input>和<Textarea>分别添加onChangeText事件，把用户输入的内容同步到对应的state字段中：

<Item style={{ marginBottom: 10}}>
  <Input 
    placeholder="Email" 
    onChangeText={(text) => this.setState({ email: text })}
    value={this.state.email} // 可选：绑定value让输入框和state双向同步
  />
</Item>
<Form style={{ marginBottom: 20}}>
  <Textarea 
    rowSpan={3} 
    bordered 
    placeholder="Votre message" 
    onChangeText={(text) => this.setState({ message: text })}
    value={this.state.message} // 可选：双向同步
  />
</Textarea>

这里绑定value属性是为了实现双向数据绑定，确保输入框显示的内容和state里的内容完全一致，这在需要重置输入框内容时会很有用。

3. 给提交按钮绑定 onPress 事件 #

点击按钮时，从state里取出邮箱和消息内容，就可以执行提交逻辑啦（比如发送到后端API）：

<Button 
  success
  onPress={() => {
    const { email, message } = this.state;
    // 这里可以做提交操作，比如打印测试
    console.log('用户邮箱：', email);
    console.log('用户消息：', message);
    // 实际项目中替换成你的提交逻辑，比如fetch/axios请求
  }}
>
  <Text>Envoyer</Text>
</Button>

完整代码示例 #

把上面的部分整合到你的代码里，完整的组件结构如下：

import React, { Component } from 'react';
import { Container, Content, Item, Input, Form, Textarea, Button, Text } from 'native-base';

class CommentForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      message: ''
    };
  }

  render() {
    return (
      <Container>
        <Content padder>
          <Item style={{ marginBottom: 10}}>
            <Input 
              placeholder="Email" 
              onChangeText={(text) => this.setState({ email: text })}
              value={this.state.email}
            />
          </Item>
          <Form style={{ marginBottom: 20}}>
            <Textarea 
              rowSpan={3} 
              bordered 
              placeholder="Votre message" 
              onChangeText={(text) => this.setState({ message: text })}
              value={this.state.message}
            />
          </Form>
          <Button 
            success
            onPress={() => {
              const { email, message } = this.state;
              console.log('邮箱：', email);
              console.log('消息：', message);
              // 这里添加你的提交逻辑
            }}
          >
            <Text>Envoyer</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

export default CommentForm;

这样一来，用户输入的邮箱和消息内容就会被实时同步到组件的state里，点击提交按钮时就能轻松获取到啦！

内容的提问来源于stack exchange，提问作者Jats1596