清除反应中的材质UI文本字段值答案

【问题标题】：clear the material UI text field Value in react清除反应中的材质UI文本字段值
【发布时间】：2018-02-05 07:54:52
【问题描述】：

react中如何清除materialUI textfield的值？

检查下面的代码 -

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

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

如果您使用的是无状态功能组件，那么您可以使用 react hooks。

还要确保您使用的是 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>
  );
};

【讨论】：

这就是答案，OP使用的是ref，而不是inputRef

【解决方案2】：

您必须将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>
    )
  }
}

【讨论】：

【解决方案3】：

试试这个

import { Button, Container, InputBase } from '@material-ui/core'
import React, { useState } from 'react'

const ClearText = ()=> {

    const [text , setText] = useState("")

const clearTextField = () => setText("")

    return (
        <Container>
        <InputBase 
        value={text ? text : ""}
        onChange={(e)=>setText(e.target.value)}
        />


        <Button onClick={clearTextField} > Clear </Button>
        </Container>
    )
};

export default ClearText;

【讨论】：

欢迎来到 Stack Overflow。当代码附有解释时，它会更有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请edit您的问题并解释它如何回答所提出的具体问题。见How to Answer。

【解决方案4】：

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

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>

【讨论】：