问更改用户名
EN

Stack Overflow用户

提问于 2019-11-26 10:42:02

回答 4查看 3.9K关注 0票数 1

我正在做一项工作来练习react，这就是任务-- 更改用户名

的解释是：

此应用程序应允许用户通过输入自定义值并单击按钮来更新其用户名。

用户名组件已经完成，不应该更改，但是App组件缺少部件。完成App组件，以便在单击按钮时用户名组件显示输入的文本。

App组件应该使用React.useRef钩子将输入传递给输入元素和用户名组件的用户名组件。

例如，如果用户输入一个新的用户名"John“并单击按钮，则id root的div元素应该如下所示：

<div><button>Change Username</button><input type="text"><h1>John Doe</h1></div>

这是给出的代码：

class Username extends React.Component {
  state = { value: "" };

  changeValue(value) {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return <h1>{value}</h1>;
  }
}

function App() {
  function clickHandler() {}

  return (
    <div>
      <button onClick={clickHandler}>Change Username</button>
      <input type="text" />
      <Username />
    </div>
  );
}

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我试过很多次去了解如何解决这个问题，但是我无法解决这个问题，如何解决这个问题？

javascript

reactjs

回答 4

Stack Overflow用户

发布于 2019-11-26 10:58:01

刚刚发现了。似乎你需要用裁判来做任何事。任何州或任何东西都不准！请注意，您不应该在现实世界的应用程序中这样做:)

function App() {
  const ref = React.useRef()
  const inputRef = React.useRef()

  function clickHandler() {
    ref.current.changeValue(inputRef.current.value)
  }


  return (
    <div>
      <button onClick={clickHandler}>Change Username</button>
      <input type="text" ref={inputRef}  />
      <Username ref={ref} />
    </div>
  );
}

票数 6

Stack Overflow用户

发布于 2019-11-26 11:23:22

这行得通

import React from 'react'
import ReactDOM from 'react-dom'

class Username extends React.Component {
  constructor(props){
    super(props);
    this.state = {value: ""};
  }

  changeValue(value) {
    this.setState({value: value});
  }

  render() {
    const value = this.state.value;
    return <h1>{value}</h1>;
  }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.userNameRef = React.createRef();
    }

  clickHandler() {
    var name = document.getElementById('name_input').value;
    this.userNameRef.current.setState({value: name});
  }

  render() {
    return (
      <div>
        <button onClick={this.clickHandler.bind(this)}>Change Username</button>
        <input id="name_input" type="text" />
        <Username ref={this.userNameRef} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

一定要理解代码，不要像我一样，忘记了bind方法:-)

票数 0

Stack Overflow用户

发布于 2020-09-15 19:21:47

在现实世界中，你可能会做这样的事情：-

import React, { useRef } from "react";
import ReactDOM from "react-dom";

class Username extends React.Component {
  state = { value: "" };

  changeValue(value) {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return <h1>{value}</h1>;
  }
}

function App() {
  const myRef = useRef();
  function clickHandler() {
    document.querySelector("h1").innerHTML = myRef.current.value;
  }

  return (
    <div>
      <button onClick={clickHandler}>Change Username</button>
      <input type="text" ref={myRef} />
      <Username />
    </div>
  );
}

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

document.querySelector("input").value = "John Doe";
document.querySelector("button").click();
setTimeout(() => console.log(document.getElementById("root").innerHTML));