Как сбросить значения MaterialUI TextField после нажатия - PullRequest
Новая
       15

Как сбросить значения MaterialUI TextField после нажатия

0 голосов
/ 27 июня 2019

Я пытаюсь сбросить входные значения после нажатия.У меня проблема в том, что компонент textField для MaterialUI имеет только свойство onChange, которого я не ищу.Есть ли способ очистить ввод без использования свойства ref?

Это то, что я уже пробовал.Текущий код хорошо обрабатывает любые изменения, используя метод onChange, но я не могу понять, как обрабатывать щелчки.

Я использовал ловушку componentDidMount, потому что я хочу установить начальные значения для входных данных после монтирования компонента.

class InputForm extends Component {
  state = {
  };

  componentDidMount() {
    const { getAllChildrenPerParent, elementSelected } = this.props;
    const model = getAllChildrenPerParent(elementSelected);
    model.forEach(parameter => {
      this.setState({ [parameter._id]: parameter.currentValue });
    });
  }

  inputResetHandler = name => {
    this.setState({ [name]: "" });
  };

  inputChangedHandler = event => {
    const { name, value } = event.currentTarget;
    this.setState({ [name]: value });
  };

  inputClickedHandler = element => {
    const { _id } = element;
    if (this.state[_id]) this.inputResetHandler(_id);
  };

  renderForm = elementSelected => {
    const { getAllChildrenPerParent } = this.props;
    const model = getAllChildrenPerParent(elementSelected);
    const formUI = model.map(parameter => {
      return (
        <React.Fragment key={parameter._id}>
          <TextField
            inputRef={element => {
              this[parameter._id] = element;
            }}
            name={parameter._id}
            onChange={this.inputChangedHandler}
            onClick={this.inputClickedHandler}
            id="outlined-adornment-weight"
            variant="outlined"
            label={parameter.name}
            defaultValue={parameter.currentValue}
            helperText={`Last value from ${convertDataToCurrentTimeZone(
              elementSelected.timezone,
              parameter.currentTime
            )}`}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  {parameter.units}
                </InputAdornment>
              )
            }}
          />
        </React.Fragment>
      );
    });
    return formUI;
  };

  render() {
    const { elementSelected } = this.props;
    return (
      <React.Fragment>
        <Typography component="h5" variant="h5" gutterBottom>
          {`Data uploaded from last entry:`}
        </Typography>
        <form>
          {this.renderForm(elementSelected)}
          <Button type="submit" variant="contained" color="primary">
            Send
            <SendIcon />
          </Button>
        </form>
      </React.Fragment>
    );
  }
}

export default InputForm;

Я ожидаю, что конкретное значение TextField, по которому щелкнули, будет сброшено до нуля

...