Question

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

道具收到一个具有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

引用提供了一种方法，可以访问在render方法中创建的DOM节点或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。

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

1 个答案: