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> ); } }组件状态，并更改它：

{{1}}

Answer 2

我想您已经找到答案了。但是我创建了这个小提琴来帮助任何有同样问题的人。您的代码中存在以下问题。 value="this.props.getValue"这不是正确的方法。您设置的值等于字符串，不等于表达式。应该是这样的value={this.props.getValue} 其次，您在onChange事件中引用了错误的函数名称。应该是这样的onChange={e => this.onKeyPress(e)}

最后，就像@Tholle所说的那样，您可以使用道具设置状态值。然后从state设置文本框的值，以便每当您编写内容时，state都会自动更新，因此文本框的值也将变为

。

遵循代码沙箱将为您提供帮助。

CodeSandBox

ReactJS：编辑文本框，其中已经有值

2 个答案: