Как получить входное значение TextField из пользовательского интерфейса материала без использования события onChange? - PullRequest
Новая
       27

Как получить входное значение TextField из пользовательского интерфейса материала без использования события onChange?

0 голосов
/ 18 мая 2019

Я пытался использовать this.refs.myField.getValue() или this.refs.myTextField.input.value. Но они амортизируются.

Я не хочу использовать onChange внутри TextField, я просто конвертирую текст при нажатии кнопки Convert 

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

class Test extends React.Component {
  constructor(props) {
    super(props);

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

  handleConvertString = (event) => {
    let str = this.refs.myField.getValue();
    this.setState({
      text: str.replace(/[dog]/gi, ''),
    })
  };
  render() {
    return (
      <div>
        <TextField
          ref="myField"
          fullWidth
        />
        <Button variant="outlined" href="#outlined-buttons" onClick={this.handleConvertString}>
          Convert
        </Button>
        <h1>{this.state.text}</h1>
      </div>
    )
    }
}

export default Test;

1 Ответ

1 голос
/ 18 мая 2019

Взгляните на документацию API текстового поля MUI .

Вы пытаетесь получить доступ к базовому значению текстовой области, поэтому вам нужен ref элемента HTML DOM.

Для текстовой области используйте: 

<TextField
  inputRef={ref => { this.inputRef = ref; }}
  fullWidth
/>

И затем в своем методе получите доступ к значению с помощью this.inputRef.value.

...