无法在 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

在状态对象内设置默认值并将更改处理程序附加到输入以捕获更改：

示例codesandbox：https://codesandbox.io/s/react-basic-class-component-22fl7

class Demo extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

                    inputValue: '[e-mail]'

                 };

  }

  handleChange = event => {

      this.setState({ inputValue: event.target.value }, () =>

          console.log(this.state.inputValue)

      );

  };

  render() {

    return (

       <div className="form-group">

         <label>Email:</label> 

         <input  

           className="form-input" 

           type="text" 

           value={this.state.inputValue}

           onChange={this.handleChange} 

           name="email">

         </input>

       </div>

    );

  }

}

Answer 4

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

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>

    );

  }

}