如何解决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>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。