javascript - react : Edit Textbox which has already value in it

Question

我是 ReactJS 的新手。我陷入了一个问题。我通过调用具有预定义值的 API 获取文本框值。但是当我尝试编辑它的值时，它不允许我编辑。

class TextEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      emailIdValue: ""
    };
  }

  onKeyPress = e => {
    const regEx = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (e.target.value === "" || !regEx.test(e.target.value)) {
    
    } else {
      this.setState({
        emailIdValue: e.target.value
      });
    }
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value="this.props.getValue"
          onChange={e => this.keyPress(e)}
        />
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我在 this.props.getValue 中得到 abc@xyz.com。

如何编辑文本框的值。

任何帮助都会很棒。

谢谢。

Answer 1

您可以在创建组件状态时将 this.props.getValue 值放入 TextEditor 组件状态，然后更改它:

class TextEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      emailIdValue: props.getValue
    };
  }

  // ...

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.emailIdValue}
          onChange={this.onKeyPress}
        />
      </div>
    );
  }
}