Question

class myInfo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      name: sessionStorage.getItem('name'),
    };

  }

  componentDidMount() {
    axios.post('http://localhost:8080/allProfiles', {
      "name": this.state.name
    })
      .then((response) => {
        document.getElementById("email").innerHTML = "email: " + response.data.email;
      })
      .catch(function (error) {
        console.log(error);

      });
  }


  render() {
    return (
      <div>
        <p id="email"></p>
      </div>

    );
  }
}

练习的菜鸟在这里做出反应。给定名称后，我的其余api只会返回一个json，其所有配置文件内容都将

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

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

email: userFromThisSession@gmail.com

全部为文字。我的目标是

image

没有花哨的css ^^

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

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

有人知道吗？我一直在寻找，但没有运气

Answer 1

我要做的是制作一个简单的<span>组件，当您单击图标时，它会变成文本框：

/// 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 });
}

然后，您必须匹配<span>和<input>的样式，以使输入内容不会显示通常的边框，宽度等。

此外，请注意，您无需直接设置HTML节点：

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

反应方式是通过设置状态来实现的：

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

我上面发布的render()将使用来自this.state的电子邮件。

Answer 2

example

deleteNode

React JS中的可编辑文本框

2 个答案: