TestDont-更改用户名-REACT

问题描述

寻找有关重构App功能的思考技巧。该组件必须保持不变。这个例子很笨拙，并且在使用ref时有几种不同的在线贡献的混搭。

我从这里开始：https://reactjs.org/docs/refs-and-the-dom.html

谢谢。

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


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

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

function App() {

   this.username = React.useRef();
   this.component = React.useRef()
 

  clickHandler = e => { 
    //console.log(this.component.current.changeValue())
    this.component.current.changeValue(this.username.current.value)
  }

  return (
    <div>
      <button onClick={clickHandler}>Change Username</button>
      <input type="text" ref={this.username}/>
      <Username ref={this.component}/>
    </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));

解决方法

尝试此代码。

function Username({ value }) {
    return (
        <h1>{value}</h1>
    );
}

class App extends React.Component {
    state = {
        usernameDynamic: '',usernameStatic: '',}

    onChangeUserName = () => {
        this.setState({ usernameStatic: usernameDynamic });
    }

    onChangeUserNameDynamic = (e) => {
        this.setState({ usernameDynamic: e.target.value });
    }

    render() {
        return (
            <div>
                <button onClick={this.onChangeUserNameStatic}>Change Username</button>
                <input type="text" value={this.state.usernameDynamic} onChange={this.onChangeUserNameDynamic} />
                <Username value={this.state.usernameStatic} />
            </div>
        );
    }
}