Question

我正在尝试编写简单的React Native Redux AddTask应用程序。我确实添加和删除了一部分。输入新内容时，我无法编辑输入值
哪个是空的，我该如何解决。在下面，我添加了一个零件，并使用化径器编辑了那部分（无效）。

AddTask.js。

AddTask.js

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { connect } from "react-redux";

class AddTask extends Component {
  state = {
    text: ""
  };

  addTask = text => {
    this.props.dispatch({ type: "ADD_TASK", text });
    this.setState({ text: "" });
  };

  render() {
    return (
      <View style={{ flexDirection: "row", marginHorizontal: 20 }}>
        <TextInput
          onChangeText={text => this.setState({ text })}
          value={this.state.text}
          placeholder="Enter New Task"
        />
        <TouchableOpacity
          onPress={() => this.addTask(this.state.text)}
          disabled={!this.state.text}
        >
          <View
            style={{
              height: 50,
              backgroundColor: "#eaeaea",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <Ionicons
              name="md-add"
              size={30}
              style={{ color: "#de9595", padding: 10 }}
            />
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}
export default connect()(AddTask);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

task.js

let nextId = 0;
const tasks = (state = [], action) => {
  switch (action.type) {
    case "ADD_TASK":
      return [
        ...state,
        {
          id: nextId++,
          text: action.text,
          completed: false,
          editing: false
        }
      ];

    case "TOGGLE_TASK":
      return state.map(task =>
        task.id === action.id ? { ...task, completed: !task.completed } : task
      );
      case "EDIT_TASK":
    let tasks = [...state];
    let indexOfUpdate = tasks.findIndex(task => {
      return task.id == action.task.id;
    });
    tasks[indexOfUpdate].text = action.task.text;
    return [
      ...state,
      {
        tasks: tasks
      }
    ];
    break;
    case "UPDATE":
      return state.map(task => {
        if (task.id === action.id) {
          return {
            ...task,
            editing: !task.editing
          };
        } else return task;
      });
      break;
    default:
      return state;
  }
};

export default tasks;

TaskList.js

const TaskList = ({ tasks, toggleTask, editTask }) => (
  <View style={{ padding: 20 }}>
    {tasks.map(task => (
      <Card>
        <View pointerEvents={task.completed ? "none" : "auto"}>
          <CardItem>
            <TextInput
              onChange={() => editTask(task)}
              value={task.text}
                 />
          </CardItem>
        </View>
      </Card>
    ))}
  </View>
);
export default TaskList;

visibleTasks.js

import { connect } from "react-redux";
import TaskList from "../components/TaskList";

const mapStateToProps = state => ({
  tasks: state.tasks
});

const mapDispatchToProps = dispatch => ({
  toggleTask: id => dispatch({ type: "TOGGLE_TASK", id }),
    editTask: task => dispatch({ type: "EDIT_TASK", task })
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TaskList);

Answer 1

我看到的第一件事是在TextInput中将task.id传递给editTask函数。

 <TextInput
    onChange={() => editTask(task.id)}
    value={task.text}
    />

但是在propsDispatching中，您定义了editTask函数来获取任务的text而不是id作为参数：

const mapDispatchToProps = dispatch => ({
  editTask: text => dispatch({ type: "EDIT_TASK", text })
});

这可能不是唯一的错误，但是当您要更新任务的文本并且任务可能具有相同的文本时，请尝试以下操作：

将任务ID和新文本传递给化简器。为此，您也可以改用onChangeText。请参见this示例，或查看官方的documentation。

 <TextInput
    onChangeText={(text) => editTask(task.id, text)}
    value={task.text}
    />

const mapDispatchToProps = dispatch => ({
  editTask: (taskId, newText) => dispatch({ type: "EDIT_TASK", taskId, newText })
});

因此，您还可以稍微清理化简器代码：

    case "EDIT_TASK":
      let tasks = [...state];
      let indexOfUpdate = tasks.findIndex(task => {
        return task.id == action.taskId;
      });
      tasks[indexOfUpdate].text = action.newText;
      return tasks;

我如何编辑TextInput的值

1 个答案: