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

Question

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

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

我试图在没有函数的情况下直接显示文本，例如{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提供了一种访问DOM节点或在render方法中创建的React元素的方法。

我会把它写成：

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>
    );
  }
}

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