javascript - 无法设置已编辑的文本

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

一旦用户单击文本字段，就会调用函数addDeviceName，并且该字段的当前文本将被设置为状态。您需要将 onClick 事件更改为 onChange 或 onBlur