单击后如何重置MaterialUI TextField值

时间:2019-06-27 16:14:21

标签: reactjs material-ui

点击后,我试图重置输入值。我的问题是materialUI的textField组件只有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值重置为null

0 个答案:

没有答案