Question

首先，感谢您的帮助。在制作Todo App时，我在功能组件中进行了添加和删除操作，但是我无法制作其他组件。如果您能帮助我，我会很高兴。

TodoItem.js ：（我尝试了很多，但由于错误而无法使其正常工作。）

class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.plugins = [addLinkPlugin];
  }
  toggleBlockType = (blockType) => {
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(
      this.state.editorState,
      command
    );
    if (newState) {
      this.onChange(newState);
      return "handled";
    }
    return "not-handled";
  };

// onClick for format options

  onAddLink = () => {
    const editorState = this.state.editorState;
    const selection = editorState.getSelection();
    const link = window.prompt("Paste the link -");
    if (!link) {
      this.onChange(RichUtils.toggleLink(editorState, selection, null));
      return "handled";
    }
    const content = editorState.getCurrentContent();
    const contentWithEntity = content.createEntity("LINK", "MUTABLE", {
      url: link,
    });
    const newEditorState = EditorState.push(
      editorState,
      contentWithEntity,
      "create-entity"
    );
    const entityKey = contentWithEntity.getLastCreatedEntityKey();
    this.onChange(RichUtils.toggleLink(newEditorState, selection, entityKey));
  };

  toggleBlockType = (blockType) => {
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
  };

  render() {
    return (
      <div className="editorContainer">
        <div className="toolbar">
          <BlockStyleToolbar
            editorState={this.state.editorState}
            onToggle={this.toggleBlockType}
          />
          // format buttons
        </div>

        <div>
          <Editor
            placeholder="Post Content"
            blockStyleFn={getBlockStyle}
            editorState={this.state.editorState}
            handleKeyCommand={this.handleKeyCommand}
            onChange={this.onChange}
            plugins={this.plugins}
            placeholder="Post Content"
          />
        </div>
      </div>
    );
  }
}

export default TextEditor;

Addtodo.js ：（我将其转换为功能，但未列出我编写的输入。）

class TodoItem extends Component {
  render() {
    const { id, title } = this.props.todo // I did not understand here what it does.

    return (
      <div>
        <p>
          <input
            type="checkbox"
            onChange={this.props.markComplete.bind(this, id)} // and here too
          />
          {""} {title}{" "}
          <button onClick={this.props.deleteTodo.bind(this, id)}>X </button>{" "}
        </p>{" "}
      </div>
    )
  }
}

App.js组件：（我能够使其正常运行。如果您可以检查它，我将非常高兴。）

const Addtodo = () => {
  const [title, setTitle] = useState("")

  const onSubmit = (e) => {  // I made a mistake here, I don't know why there is a problem.
    e.preventDefault()
    setTitle("")
  }

  const onChange = (e) => setTitle(e.target.value)

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        onChange={onChange}
        value={title}
        placeholder="Add todo"
      />
      <input type="Submit" value="Submit" className="btn" />
    </form>
  )
}

Answer 1

在您对AddTodo组件的定义与将您的AddTodo组件添加到DOM之间不匹配。在Addtodo.js中，您的函数签名为：

const Addtodo = () => {

因此Addtodo组件不希望将任何道具传递到其中。

在App.js中，您尝试通过以下方式将组件添加到DOM：

<AddTodo Addtodo={Addtodo} />

因此，您要使用称为Addtodo的道具来渲染组件，但是如前所述，在组件的定义中，它不希望接收任何道具。

您需要确定是否要/需要AddTodo组件来接收道具。

如果您希望它接收AddTodo道具，则可以将函数定义更改为：

const Addtodo = ({ AddTodo }) => {

此外，请确保在导出Addtodo组件时，将其导出为默认导出，因为当前代码中的大小写不一致（定义为Addtodo，但尝试在App.js中呈现为AddTodo）。但是，如果这是默认导出，则没关系。确保您对AddTodo的导入语句与渲染AddTodo时的语句相同。

为明确起见，请确保Addtodo.js中有export default Addtodo 确保add todo组件的import语句相同。因此，如果App.js的顶部显示import AddTodo from './Addtodo'，则稍后在文件中呈现组件时，它的完成就类似于<AddTodo />。并且如果导入为import Addtodo from './Addtodo'，则该组件将呈现为<Addtodo>（框必须一致）

如果这不是最明确的解释，我深表歉意。我不确定我所指的某些事物的实际用语是什么，但我希望你能理解我的意思。

Answer 2

您可以从表单元素中删除onSubmit函数，并将其与button元素中的onClick一起使用。试试看。我认为它将起作用。

React Todo App在将类组件转换为功能组件时遇到错误

2 个答案: