Question

如何清除react中的materialUI文本字段值？

检查以下代码 -

<TextField
  hintText=""
  ref={(node) => this._toField = node}
  onChange={this.changeToText}
  floatingLabelText="To*"
  floatingLabelFixed={true}
  fullWidth={true}
/>

我在按下它时使用了raiseButton来验证上面的字段。如果该字段有错误，则显示错误消息。如果没有，那么我们需要清除输入。但是我们如何清除输入文本？

Answer 1

您必须将value属性传递给TextField组件。检查以下示例：

class SomeComponent extends Component {
  state = {value: ''}
  resetValue = () => {
    this.setState({value: ''});
  }
  render() {
    return (
      <div>
        <TextField
          ...
          value={this.state.value}
        />
        <button onClick={this.resetValue}>Reset</button>
      </div>
    )
  }
}

Answer 2

您需要以某种方式存储输入的值。在这种情况下，州似乎是一种初步的方法。每当文本发生变化时，您都必须更新状态。当您单击按钮并随后单击输入值时，同样适用：

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      value: ''
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }
  
  handleChange(event) {
    this.setState({ value: event.target.value })
  }

  handleClick() {
    // validation...
    this.setState({ value: '' })
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange}/>
        <button onClick={this.handleClick}>Click-me</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

如果您使用的是无状态功能组件，则可以使用react挂钩。

还要确保您正在使用inputRef

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

let MyFunctional = props => {
  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.value = "";
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
};

清除材料UI文本字段中的值

3 个答案: