javascript - 如何访问从父组件传递到子组件的属性的某些数据？

Question

我正在学习 React，我正在尝试在子组件中调用一个函数，该函数访问从父组件传递的属性并显示它。

Prop 接收具有 2 个属性的“todo”对象，其中一个是文本。

我曾尝试在没有函数的情况下直接显示文本，例如 {this.props.todo.text} 但它没有出现。我也像代码所示那样尝试调用返回文本的函数。

这是我的 App.js

import React, { Component } from "react";
import NavBar from "./components/NavBar";
import "./App.css";
import TodoList from "./components/todoList";
import TodoElement from "./components/todoElement";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: []
    };
    this.addNewTodo = this.addNewTodo.bind(this);
  }

  addNewTodo(input) {
    const newTodo = {
      text: input,
      done: false
    };
    const todos = [...this.state.todos];
    todos.push(newTodo);
    this.setState({ todos });
  }
  render() {
    return (
      <div className="App">

        <input type="text" id="text" />
        <button
          onClick={() => this.addNewTodo(document.getElementById("text"))}
        >
          Add new
        </button>

        {this.state.todos.map(todo => (
          <TodoElement key={todo.text} todo={todo} />
        ))}
      </div>
    );
  }
}

export default App;

这是我的 todoElement.jsx

import React, { Component } from "react";

class TodoElement extends Component {
  state = {};

  writeText() {
    const texto = this.props.todo.text;
    return texto;
  }
  render() {
    return (
      <div className="row">
        <input type="checkbox" />
        <p id={this.writeText()>{this.writeText()}</p>
        <button>x</button>
      </div>
    );
  }
}

export default TodoElement;

我希望当我在输入框中写入并按下添加时，它会显示文本。

Answer 1

来自 documentation

Refs provide a way to access DOM nodes or React elements created in the render method.

我会这样写:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: []
    };
    this.textRef = React.createRef();
    this.addNewTodo = this.addNewTodo.bind(this);
  }

  addNewTodo() {
    const newTodo = {
      text: this.textRef.current.value,
      done: false
    };
    const todos = [...this.state.todos, newTodo];
    this.setState({ todos });
  }
  render() {
    return (
      <div className="App">
        <input type="text" id="text" ref={this.textRef} />
        <button onClick={this.addNewTodo}>Add new</button>

        {this.state.todos.map(todo => (
          <TodoElement key={todo.text} todo={todo} />
        ))}
      </div>
    );
  }
}

在您的方法中，作为方法 addNewTodo 的参数 input 的参数是 Element目的。它不是您在文本字段中输入的值。要获取该值，您需要调用 input.value。但是我们在 React 中不鼓励这种方法，而是在需要访问 html 原生 dom 时使用 Ref。