无法在 React 中编辑输入元素的值

Question

我的 React 项目有问题，我有一个如下所示的输入元素，但我无法编辑输入的文本。我只能在删除 value 属性时编辑输入文本，但我想要一个默认值。  <div className="form-group">       <label>Email:</label>        <input            className="form-input"           type="text"           value="[e-mail]"           name="email">       </input>  </div>

Answer 1

如果您有一个不受控制的组件，您可能希望使用该defaultValue属性而不是value（请参阅此参考）

Answer 2

您可以使用useRef或defaultValue

import React, { useRef, useEffect } from "react";

const input = useRef();

useEffect(() => {

    input.current.value = "[e-mail]";

}, []);

<input ref={input} className="form-input" type="text" name="email" />`

Answer 3

这是一个示例代码如何在反应中使用输入

class NameForm extends React.Component {

  constructor(props) {

    super(props);

    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {

    this.setState({value: event.target.value});

  }

  handleSubmit(event) {

    alert('A name was submitted: ' + this.state.value);

    event.preventDefault();

  }

  render() {

    return (

      <form onSubmit={this.handleSubmit}>

        <label>

          Name:

          <input type="text" value={this.state.value} onChange={this.handleChange} />

        </label>

        <input type="submit" value="Submit" />

      </form>

    );

  }

}