web-dev-qa-db-fra.com

ReactJS - Comment puis-je définir une valeur pour le champ de texte à partir de material-ui?

J'ai un selectField et je veux lui attribuer une valeur. Disons que je tape dessus et que lorsque je clique sur un bouton, le bouton appellera une fonction qui réinitialisera la valeur du champ de texte?

<TextField hintText="Enter Name" floatingLabelText="Client Name" autoWidth={1} ref='name'/>
reactjsmaterial-ui
16
dczii

Vous pouvez le faire de cette façon

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>
        );
      }
    }
23
WitVault

Il est soutenu que la bonne façon est de contrôler le composant dans un scénario comme la réponse acceptée, mais vous pouvez également contrôler la valeur de cette manière grossière et culturellement inacceptable.

<TextField ref='name'/>

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

et vous pouvez bien sûr récupérer la valeur comme ça

this.refs.name.getValue()
4
James

Au lieu d'utiliser ref, vous devez utiliser 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>
  )
};
2
Passos