Question

我正在将我在ReactJS上创建的一个简单的待办事项应用程序改编为React Native。我实际上只是一堆示例待办事项，我可以检查它们是否已完成并删除。现在，我想添加一些待办事项以使其显示。

在ReactJS中，我创建了一个具有以下类的组件：

handleSubmit(event) {
    event.preventDefault() //meter depois

    this.props.addTodo(this.input.value,this.props.todos)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          New todo:
        </label>
          <input type="text" ref={(input) => this.input = input}/>

      </form>
    )
  }

然后我通过驻留在主应用程序中的props传递了一个函数，并执行了以下操作：

addTodo(value) {
        const allTodos = this.state.todos
        const lastTodo = this.state.todos.slice(-1)[0]
        const newId = lastTodo.id + 1
        const newTodo = {id: newId, text: value, completed:false}
        allTodos.push(newTodo)
        this.setState({todos:allTodos})
    }

这很好。现在，当我尝试在React Native中执行此操作时，我会遇到一些问题。

我尝试了2次：

1）使用TextInput

子组件：

import React from 'react';
import {Alert,  Text, View, TextInput } from 'react-native'

function TodoForm(props) {
  return (
    <View>
      <TextInput
        style={{height: 40}}
        placeholder="Type here!"
        onSubmitEditing = {(text) => props.formFunction(text)}
      />
    </View>
  )
}

export default TodoForm

在主应用程序中，我将a传递给道具，即formFunction，它是addTodo（用if / else添加了一些额外的逻辑，但这不是问题的根源，我用伪文本进行了检查）：

addTodo(text) {
    Alert.alert(text) //testing
    const allTodos = this.state.todos
    var newTodo = {}
    if(allTodos.length > 0) {
      const lastTodo = allTodos.slice(-1)[0] //gets last element of the list of todos
      const newId = lastTodo.id + 1
      newTodo = {id:newId, text:text, completed:false} //uses sample text to test
    } else {
      newTodo = {id:0, text:text, completed:false} //uses sample text to test

    }

    allTodos.push(newTodo)
    this.setState({todos:allTodos})
  }

当我提交一些文本时，问题出在 text 参数上。不使用text参数时，它可以工作（使用伪文本）。

如果我只是在警告中添加了示例文本，它就会在崩溃前显示：

Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, nativeEvent, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.

以这种方式，它崩溃并显示错误消息：

Error calling RCTEventEmitter.receiveEvent Exception calling object as function:[object Object],348,349 is not usable as a native method argument(<unknown file>;3029)

2）使用react-native-elements表单 这甚至更加混乱，它们甚至都没有渲染（我可能很笨，但是还没有找到很好的用法示例），我真的不知道如何使它们工作。如何传递文字？

基本上，如果可以帮助我以最简单/最好的方式将文本从孩子的输入文本形式传递给父母，我将非常感谢！（如果您能解释该“文本”参数发生了什么以及为什么不起作用，则有好处）

如何从React Native的子组件中获取文本输入？

0 个答案: