React Native中如何将TextInput数据存入状态并通过POST请求发送至Django后端

我来帮你一步步完成这个功能，核心分为两个部分：管理TextInput的输入状态和向Django后端发送POST请求，咱们结合你现有的代码来修改：

1. 添加状态管理TextInput输入内容 #

首先，你需要新增一个useState来存储TextInput的实时输入值，这样才能把用户输入的内容拿到并准备发送：

// 在组件顶部，和todos的状态一起定义
const [inputText, setInputText] = useState('');

然后给你的TextInput添加value和onChangeText属性，实现输入内容与状态的双向绑定：

<TextInput
  style={styles.textInput}
  editable
  maxLength={40}
  value={inputText} // 绑定状态值，确保输入框显示最新内容
  onChangeText={(text) => setInputText(text)} // 实时更新状态
  placeholder="输入待办事项..." // 可选：添加输入提示提升体验
/>

2. 实现POST请求发送函数 #

接下来编写一个处理提交的函数，用Axios发送POST请求，把状态里的inputText按照后端要求的格式{ "item":"xxx" }发送：

const handleSubmit = () => {
  // 先判断输入是否为空，避免发送无效请求
  if (!inputText.trim()) {
    alert('请输入待办内容');
    return;
  }

  axios.post('http://192.168.1.5:8000/app/todo-data/', {
    item: inputText // 严格按照后端要求的字段名构造数据
  })
  .then((response) => {
    console.log('数据提交成功:', response.data);
    // 提交成功后刷新待办列表，同时清空输入框
    todoData();
    setInputText('');
  })
  .catch((error) => {
    console.error('提交失败:', error);
    alert('数据提交失败，请稍后重试');
  });
};

3. 添加提交触发按钮 #

最后，给用户一个提交入口，比如在TextInput旁边加一个按钮，点击时调用handleSubmit：

// 修改你的View结构，把TextInput和按钮放在同一行
<View style={styles.inputContainer}>
  <TextInput
    style={styles.textInput}
    editable
    maxLength={40}
    value={inputText}
    onChangeText={(text) => setInputText(text)}
    placeholder="输入待办事项..."
  />
  <TouchableOpacity style={styles.submitBtn} onPress={handleSubmit}>
    <Text style={styles.btnText}>添加</Text>
  </TouchableOpacity>
</View>

可以给按钮补充基础样式，在styles里添加：

const styles = StyleSheet.create({
  // ... 你现有的其他样式
  inputContainer: {
    flexDirection: 'row',
    gap: 10,
    marginBottom: 20,
    alignItems: 'center'
  },
  textInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 8
  },
  submitBtn: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8
  },
  btnText: {
    color: 'white',
    fontWeight: 'bold'
  }
});

额外注意事项 #

• 确保你的Django后端已经配置了CORS跨域支持（可以使用django-cors-headers包），否则React Native会因为跨域问题无法发送请求。
• 后端的POST接口需要正确接收item字段的数据，并且返回合法的响应格式。

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