Question

我有一个selectField，我想在其上设置一个值。假设我输入它，当我点击一个按钮时，按钮会调用一个函数来重置文本字段的值吗？

<TextField hintText="Enter Name" floatingLabelText="Client Name" autoWidth={1} ref='name'/>

Answer 1

你可以这样做

export default class MyCustomeField extends React.Component {

      constructor(props) {
        super(props);

        this.state = {
          value: 'Enter text',
        };
      }

      handleChange = (event) => {
        this.setState({
          value: event.target.value,
        });
      };

     handleClick = () => {
        this.setState({
          value:'',
        });
      };

      render() {
        return (
          <div>
            <TextField
              value={this.state.value}
              onChange={this.handleChange}
            />
            <button onClick={this.handleClick}>Reset Text</button>
          </div>
        );
      }
    }

Answer 2

我们坚持认为正确的方法是在一个场景中控制组件，例如那里接受的答案，但你也可以用这种粗略的，文化上不可接受的方式控制价值。

import React from 'react';
import withRouter from 'react-router/lib/withRouter';

class Component extends React.Component {
  updateLocationState(value) {
    const newLocation = Object.assign({}, this.props.location, {
      state: Object.assign({}, this.props.location.state, {
        myKey: value,
      }),
    });
    this.props.router.replace(newLocation);
  }
  ...
}

export default withRouter(Component);

你当然可以检索这样的值

<TextField ref='name'/>

this.refs.name.getInputNode().value = 'some value, hooray'

Answer 3

您应该使用ref

，而不要使用inputRef

const MyComponent = () => {
  let input;

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        console.log(input.value);
      }}>
      <TextField
        hintText="Enter Name" 
        floatingLabelText="Client Name" 
        autoWidth={1}
        inputRef={node => {
          input = node;
        }}/>
    </form>
  )
};

Answer 4

我更喜欢这种分配状态变量的方式：

<TextField value={mobileNumber} 
     onChange={e => { this.setState({ mobileNumber: e.target.value }) }}
     className={classes.root}
     fullWidth={true}
     label={t('mobile number')} />

Answer 5

这是答案的一个简短的简单 React Hook 版本

export default function MyCustomeField({
  initialValue= '', 
  placeholder= 'Enter your text...'
}) {
  const [value, setValue] = React.useState(initialValue)

  return (
    <div>
      <TextField
        placeholder={placeholder}
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <button onClick={() => setValue(initialValue)}>Reset Text</button>
    </div>
  );
}

ReactJS - 如何从material-ui设置textfield的值？

5 个答案: