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

您可以使用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 2

如果您有一個不受控制的組件，您可能需要使用defaultValue屬性而不是value （請參閱此參考）

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

Answer 4

在 state 對象中設置默認值並將更改處理程序附加到輸入以捕獲更改：

示例代碼和框： 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>
    );
  }
}