Javascript 响应更改用户名

我正在做一项任务来练习react编程，这是一项任务-

解释如下：

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

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

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

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

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

这是给定的代码：

---

我试图了解如何解决这个问题，但我无法解决这个问题，如何解决这个问题？

刚刚找到答案。似乎你需要对每件事都使用refs。不允许任何州或任何事情！请注意，在现实世界的应用程序中，您不应这样做：

功能应用程序{ const ref=React.useRef const inputRef=React.useRef 函数clickHandler{ ref.current.changeValueinputRef.current.value } 回来 更改用户名 ; }

---

刚刚发现。似乎你需要对每件事都使用refs。不允许任何州或任何事情！请注意，在现实世界的应用程序中，您不应这样做：

功能应用程序{ const ref=React.useRef const inputRef=React.useRef 函数clickHandler{ ref.current.changeValueinputRef.current.value } 回来 更改用户名 ; }

---

这种组件结构可能不是您的最佳选择。通常，您希望在顶部有一个类组件，在底部有功能组件，并在类组件中调用这些功能组件

所以在应用程序中渲染只是让事情变得困难。在应用程序中，您应该只渲染并保存逻辑：

class Username extends Component {
constructor(props){
this.state = { usernameValue: ''};
this.onInputChange = this.onInputChange.bind(this);
this.changeUsername = this.changeUsername.bind(this);
}

onInputChange(event) {
this.setState({usernameValue: event.target.value});
}

changeUsername() {
//Update username in the DB
db.record = this.state.usernameValue
}

render(){

return (
<div>//Wrapper div
<input onChange={this.onInputChange} value={this.state.usernameValue} />
<button onClick={this.changeUsername}>Change Username</button>
</div>
);

}

}

function App(){
return(
<Username />
);
}

我这样做的方式与您试图通过单击按钮来更新用户名的方式不同，您可以这样做，但最好在输入用户名时更新状态，然后使用按钮单击作为表单提交或类似的方式

---

这方面的一个好资源是

此组件结构可能不是您的最佳选择。通常，您希望在顶部有一个类组件，在底部有功能组件，并在类组件中调用这些功能组件

所以在应用程序中渲染只是让事情变得困难。在应用程序中，您应该只渲染并保存逻辑：

class Username extends Component {
constructor(props){
this.state = { usernameValue: ''};
this.onInputChange = this.onInputChange.bind(this);
this.changeUsername = this.changeUsername.bind(this);
}

onInputChange(event) {
this.setState({usernameValue: event.target.value});
}

changeUsername() {
//Update username in the DB
db.record = this.state.usernameValue
}

render(){

return (
<div>//Wrapper div
<input onChange={this.onInputChange} value={this.state.usernameValue} />
<button onClick={this.changeUsername}>Change Username</button>
</div>
);

}

}

function App(){
return(
<Username />
);
}

我这样做的方式与您试图通过单击按钮来更新用户名的方式不同，您可以这样做，但最好在输入用户名时更新状态，然后使用按钮单击作为表单提交或类似的方式

这方面的一个好资源是

这很有效

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方法：-

这很有效

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方法：-

在现实世界中，您可能会这样做：-

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

---

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

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

---

应用程序组件与显示用户名无关这是否回答了您的问题？应用程序组件与显示用户名无关这是否回答了您的问题？这很管用，但很可怕请大家不要在现实世界的应用程序中这样做。这绝对是一场噩梦：D+1@EmileBergeron，我们应该如何在现实世界中使用我假设的共享状态来实现这一点，或者context@JavascriptCoder在OP的模拟用例中，这个答案是有效的。但是这个技能测试网站上的用例本身就是一个反模式。使用ref访问子节点的实例方法是一种脆弱的攻击。它假定子组件的实现，如果子组件使用钩子，它将不起作用。通常，React组件会提供一个有用的API，比如用户名组件上的值道具。它可以工作，但很可怕！：请大家不要在现实世界的应用程序中这样做。这绝对是一场噩梦：D+1@EmileBergeron，我们应该如何在现实世界中使用我假设的共享状态来实现这一点，或者context@JavascriptCoder在OP的模拟用例中，这个答案是有效的。但是这个技能测试网站上的用例本身就是一个反模式。使用ref访问子节点的实例方法是一种脆弱的攻击。它假定子组件的实现，如果子组件使用钩子，它将不起作用。通常，React组件将提供有用的API，比如用户名组件上的值属性。