在 ReactJS 输入中显示占位符文本，直到单击然后显示"typing"

Question

单击文本框后，我的一些div将显示一个"打字"在点击之前，它应该显示"；这只是一个样本">

<input type="text" onClick={this.state}>

Answer 1

尽管您的问题非常混乱，但以下是您的示例代码。也许它会给你指明正确的方向。

import React from "react";
export default class Test extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
someState: ""
}
this.onChangeState = this.onChangeState.bind(this);
}
onChangeState(e) {
this.setState({
someState: //logic here
})
}
render() {
const {someState} = this.state;
return (
<>
<input type="text" onClick={e => this.onChangeState(e)}>
State value: {someState}
</>
)
}
}

无论何时单击所选div，都会调用onChangeState方法，在该方法中可以操作您的状态。不要忘记，每次状态更新都会导致重新发布。欲了解更多信息，请访问官方React文档。

Answer 2

如果我理解正确，您希望在单击div后显示单词"打字"。我认为这将帮助你

import React from "react";
export default class Typing extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
yourStateName: ""
}
this.onChangeState = this.onChangeState.bind(this);
}
onChangeState(e) {
this.setState({
yourStateName: "Typing"
})
}
render() {
const {yourStateName} = this.state;
return (
<div>
<input type="text" onClick={e => this.onChangeState(e)}>
value: {yourStateName}
<div/>
)
}
}