清除Textfield材料-ui ReactJS答案

【问题标题】：Clear Textfield material-ui ReactJS清除Textfield材料-ui ReactJS
【发布时间】：2017-11-07 15:56:21
【问题描述】：

我有两个文本字段和一个使用 Material-UI 的按钮，我想要实现的是在单击按钮时清除文本字段的内容但我不知道该怎么做，我是新手到 React-JS。

这是我的代码：

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

export default class CreateLinksave extends React.Component {
    render() {
        return (
            <div clssName="container">
                <div>
                    <TextField floatingLabelText="Receipt Desc" />
                </div>
                <div>
                    <TextField floatingLabelText="Triggers Required" />
                </div>
                <RaisedButton label="Clear" />
            </div>
        );
    }
};

有人可以帮我解决这个问题吗？

【问题讨论】：

您将不得不添加一些组件方法并将事件绑定到您的凸起按钮
您使用的是什么版本的 Material-UI？

标签： javascript reactjs material-ui

【解决方案1】：

文本应由国家处理

因此，您必须只编辑组件的状态，以便显示您的更改

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';


export default class CreateLinksave extends React.Component {
  constructor(props){
    super(props);
    // initial state
    this.state = this.getDefaultState();
  }

  getDefaultState = () => {
    return { text1: '', text2: '' };
  }

  clear = () => {
    // return the initial state
    this.setState(this.getDefaultState())
  }

 render() {
  return (
    <div className="container">
      <div>
          <TextField
            value={this.state.text1}
            onChange={(e)=>{this.setState({text1: e.target.value})}}
            floatingLabelText="Receipt Desc"
          />
      </div>
        <div>
          <TextField
            onChange={(e)=>{this.setState({text2: e.target.value})}}
            value={this.state.text2}
            floatingLabelText="Triggers Required"
          />
        </div>
        // use the clear function
        <RaisedButton label="Clear" onClick={this.clear}/>
    </div>
  );
 }
}

【讨论】：

【解决方案2】：

如果有人对 React 中的功能组件有同样的问题，那么您必须处理带有状态的 Textfield 组件的值。不管你是否使用 Formik 库。使用状态变量简单控制文本字段的值属性。

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

const sampleTextControl = () => {
  const [value, setValue] = useState(''); //Initial value should be empty
  const handleSubmit = (e)=> {
    alert('The value: ' + value);
    setValue('');                        //To reset the textfield value
    e.preventDefault();
  }
  
  return ( 
    <form onSubmit={handleSubmit}>
      <Textfield id="standard-basic" value={value} onChange={(e)=>setValue(e.target.value)}/> 
      <Button variant="contained" type="submit" value="Submit">
        Submit
      </Button>
    </form >
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

【解决方案3】：

如果您不想管理每个文本字段的状态，那么您应该使用 refs：

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

export default class CreateLinksave extends React.Component {
    constructor(props) {
      super(props);
      this.receiptRef = React.createRef('');
      this.triggersRef = React.createRef('');
    }

    handleClick = () => {
       this.receiptRef.current.value = null;
       this.triggersRef.current.value = null;
    }

    render() {
        return (
            <div clssName="container">
                <div>
                    <TextField floatingLabelText="Receipt Desc" />
                </div>
                <div>
                    <TextField floatingLabelText="Triggers Required" />
                </div>
                <RaisedButton label="Clear" onClick={this.handleClick}/>
            </div>
        );
    }
};

【讨论】：