Question

我正在使用Google的Material-UI和React创建UI。在创建需要从Material-ui的TextFields输入的页面后，我需要在点击material-ui按钮时重置字段。有人可以指导我如何实现这个吗？

这是我的代码：

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

const  Page = () => {
  return (
    <div>
      <h3>Location > Child Location</h3>

      <div className="row">
        <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-md m-b-15">
          <div>
            <p>Some paragraph</p>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-12 col-sm-3 col-md-3 col-lg-3 col-md m-b-15">
          <p>Name of the text field</p>
        </div>
        <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4 m-b-15">
          <TextField
            hintText="Text field..."
            fullWidth={true}
          />
        </div>
      </div>
    </div>
   );
};

建议后的更新代码：

import React, from 'react';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';

export default class Page extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {
        firstName: '',
      }
    }

    this.handleReset = this.handleReset.bind(this);
  }

  handleReset() {
    this.setState({
      data: {
        firstName: '',
      }
    })
  }

  render () {
    const { data } = this.state;

    return (
      <div>
        ...
        <TextField
          hintText="Text field..."
          fullWidth
          value={data.firstName}
        />

        <FlatButton label="Reset values" onClick={this.handleReset} />
      </div>
      ...
    )
  }
}

Answer 1

我假设您正在某处存储这些值（例如状态）。

＆＃13;

class Page extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      data: {
        firstName: '',
      }
    }
    
    this.handleChange = this.handleChange.bind(this)
    this.handleReset = this.handleReset.bind(this)
  }
  
  handleChange(event) {
    this.setState({
      data: {
        firstName: event.target.value
      }
    })
  }
  
  handleReset() {
    this.setState({
      data: {
        firstName: '',
      }
    })
  }
  
  render() {
    const { data } = this.state
    
    return (
      <div>
        <input type="text" onChange={this.handleChange} value={data.firstName} />
        
        <button onClick={this.handleReset}>Reset values</button>
      </div>
    )
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
)

＆＃13;

<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>

＆＃13;

Answer 2

首先，最好使用'受控输入'，这意味着您将值保存在状态/存储中并将其传递给输入，然后处理输入onChange以更新该值，因此每当您想要重置它时，你只需清楚你的状态。

第二种方式可能是使用refs来选择DOM输入并清除它，这不是最好的方法。

如何清除TextFields的条目并通过单击按钮将它们设置为默认值？

2 个答案: