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

Question

我的 React 项目有问题，我有一个如下所示的输入元素，但我无法编辑输入的文本。我只能在删除 value 属性时编辑输入文本，但我想要一个默认值。

  <div className="form-group">
       <label>Email:</label> 
       <input  
          className="form-input" 
          type="text" 
          value="l.h.thuong181@gmail.com" 
          name="email">
       </input>
  </div>

Answer 1

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

Answer 2

您可以使用useRef 或defaultValue

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

const input = useRef();
useEffect(() => {
    input.current.value = "l.h.thuong181@gmail.com";
}, []);

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

Answer 3

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

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>
    );
  }
}

Answer 4

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

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

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
                    inputValue: 'l.h.thuong181@gmail.com'
                 };
  }

  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>
    );
  }
}