reactjs - TestDont - 更改用户名 - 反应
问题描述
寻找重构 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>
);
}
}
推荐阅读
- c++ - myvector.size() 在唯一函数中返回 0
- angular - Chart.js - 注释垂直线在Angular 6中随鼠标移动
- java - 具有递归函数的最大数字
- javascript - 传单删除 GeoJSON 层
- javascript - 可以在没有 ssh 访问或保持终端运行的情况下构建使用 socket.io 的网络聊天应用程序吗?
- swift - 倒带时AVPlayer currentTime错误
- android - 在 Room 中动态构建查询
- c - realloc,用于 C 中的字符串数组
- android - 您需要使用 OKHTTP3 以 JSON 格式发布请求 - Android
- javascript - 使用 javascript 在 div 中查找链接并转到它