Reactjs react js中的可编辑文本框

为了简单起见，它现在只会收到电子邮件。目前此页面的输出为

{
    "email": ...
    "description: ...
}

全部为文本。我的目标是

没有花哨的css^^

因此，这是上面图片的用户名，但电子邮件的概念相同。我想要

email: userFromThisSession@gmail.com

---

有人知道怎么做吗？我已经搜索了一段时间，但运气不好，我要做的是制作一个简单的组件，当你点击图标时，它会变成一个文本框：

email: a textbox (has the email from above) (and then a button to edit it)

执行此操作的方法是通过设置状态：

document.getElementById("email").innerHTML = "email: " + response.data.email;

我在上面发布的

render（）

将使用来自

this.state的电子邮件

类信息扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“
};
this.handleChange=this.handleChange.bind（this）；
this.updateEdit=this.updateEdit.bind（this）；
}
手变（e）{
这是我的国家({
名称：e.target.value
})
}
updateEdit（e，value=“null”）{
这是我的国家({
iEdit:值
});
}
render（）{
返回(
{this.state.name}
);
}
}
render（，document.getElementById（'root'））；
您是否尝试过
？是的，我尝试过，但文本没有进入输入，或者我可能做得不对。我建议您再次查看官方文件。如果您尝试这样做smth:
document.getElementById（“email”）.innerHTML=“email:”+response.data.email你肯定没有想到反应。检查
/// inside your render() method:

(this.state.editMode)
?  <input className='edit-email' type='text' value={ this.state.email || '' } onBlur={this.toggleEditEmail} />
: <>
   <span className='edit-email' >{ this.state.email }</span>
   <img href="edit.png" onClick={this.toggleEditEmail} />
  </>

/// Toggle function:
toggleEditEmail() {
  this.setState({ editMode: !this.state.editMode });
}

document.getElementById("email").innerHTML = "email: " + response.data.email;

this.setState({ email: response.data.email });

class Info extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.updateIsEdit = this.updateIsEdit.bind(this);
  }

  handleChange(e) {
    this.setState({
      name:e.target.value
    })
  }
  updateIsEdit(e, value="null") {
    this.setState({
        isEdit: value
    });
  }

  render() {
    return (
      <div>
        <input type="text" name="userName" value={this.state.name} placeholder="Enter your name..." onChange={this.handleChange} onBlur={this.updateIsEdit}/>
        <img src="https://img.icons8.com/android/24/000000/edit.png" className="edit" />
        <p id="name">{this.state.name}</p>
      </div>

    );
  }
}

render(<Info />, document.getElementById('root'));