Question

const emailInput = document.getElementById("loginEmail");
emailInput.value = ''
...
<input
  id="loginEmail"
  value={state.email}
  type="input" 
  className="input-text" 
  name="email" 
  placeholder={txt.emailAddress}
  onChange={formValue}
></input>

在上面的示例中，我在第2行遇到的错误是类型“ HTMLElement”上不存在“属性”值。ts（2339）

`

Answer 1

这是您应该如何控制React中的input值

<input
  id="loginEmail"
  value={this.state.email}  
  type="input" 
  className="input-text" 
  name="email" 
  placeholder={txt.emailAddress}
  onChange={formValue}
></input>

为了清除值：

this.setState({
  email: ''
});

Answer 2

您必须为value元素分配input。要清除该值，只需重置state变量。

this.setState({ email: "" });

这是给您的小代码

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVal: "Clue Mediator"
    };
    this.onInputChange = this.onInputChange.bind(this);
    this.clearInput = this.clearInput.bind(this);
  }

  clearInput() {
    this.setState({ inputVal: "" });
  }

  // handle input change event
  onInputChange(e) {
    this.setState({ inputVal: e.target.value });
  }

  render() {
    return (
      <>
        <input
          placeholder="Enter your value here..."
          value={this.state.inputVal}
          onChange={this.onInputChange}
        />
        <input type="button" value="clear" onClick={this.clearInput} />
      </>
    );
  }
}

这是适合您的演示程序
https://codesandbox.io/s/autumn-darkness-rybj2

希望这对您有用！

React TypeScript：如何清除输入字段

2 个答案: