点击后,我试图重置输入值。我的问题是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