无法设置已编辑的文本

Question

我想实现内联编辑，但是遇到了问题。当我单击文本时，会出现一个文本字段，当我填充文本并按Enter键或单击某处时，不会设置填充的文本。我做错了什么？

代码

export default class InlineEditing extends Component {
  constructor() {
    super();
    this.state = {
      edit: false,
      text: 'Click here to name your device'
    };
  }

  handleDeviceName = () => { this.setState({ edit: true })};

  addDeviceName = (e) => {
    this.setState({
      text: e.target.value
    });
  };

  render() {
    return (
      <Wrapper>
        <div
          onClick={this.handleDeviceName}
        >
          {this.state.edit ?
            <TextField
              name = "device_name"
              onClick={this.addDeviceName}
            /> :
            this.state.text
          }
        </div>
      </Wrapper>
    );
  }
}

Answer 1

只要用户点击文本字段，就会调用函数+----+-------------+-------+--------+--------------------------------------------------------+------------------------------+---------+---------------------------------+-------+----------------------------------------------+ | id | select_type | table | type | possible_keys | key | key_len | ref | rows | Extra | +----+-------------+-------+--------+--------------------------------------------------------+------------------------------+---------+---------------------------------+-------+----------------------------------------------+ | 1 | SIMPLE | c2m | ref | categories2media_media_id,categories2media_category_id | categories2media_category_id | 2 | const | 32076 | Using where; Using temporary; Using filesort | | 1 | SIMPLE | c1 | eq_ref | PRIMARY,idx_uid_type,idx_type | PRIMARY | 3 | uakino.c2m.categories2media_uid | 1 | Using where | +----+-------------+-------+--------+--------------------------------------------------------+------------------------------+---------+---------------------------------+-------+----------------------------------------------+ ，并且字段的当前文本将设置为状态。 您需要将addDeviceName事件更改为onClick或onChange

之类的内容

Answer 2

试试这个：

{this.state.edit ?
      <TextField
          name = "device_name"
          onChange={this._addDeviceName.bind(this)}
      /> :
      this.state.text
 }

_addDeviceName(e){
    if(e.keyCode == 13){
        this.setState({edit: false});
    }else{
       this.setState({text:e.target.value});  
    }  
 }