我正在尝试在 Material-UI 的 TextField 上使用 React 的“ref”属性访问输入数据。似乎没有通过“inputRef”或“inputProps”执行此操作的简单方法。
下面的示例在第 26 行显示了 inputProps 的使用。将 TextField 的名称分配给“ref”属性似乎没有生成有效的对象。
使用“inputRef”,根据 Material-ui docs 强制使用函数,尝试将字段数据作为属性传递也不起作用。例如:(txt => this.name = txt)
有人找到解决办法了吗?
class MediaForm extends Component {
constructor (props) {
super(props)
this.state = {}
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit (e) {
const { title, colour } = this.refs
e.preventDefault()
window.alert(`New colour: ${title.value} ${colour.value}`)
}
render () {
const { classes } = this.props
return (
<form className={classes.root}
onSubmit={this.handleSubmit}>
<div className={classes.field}>
<TextField
name='title'
type='text'
label='Title'
placeholder='Movie title...'
autoFocus
inputProps={{ref: this.name}}
required />
</div>
<div className={classes.field}>
<Tooltip title='Add a colour the reflects the mood of the film'>
<TextField
name='colour'
type='color'
label='Mood'
inputProps={{ref: this.name}}
required />
</Tooltip>
</div>
<Button
variant='raised'
color='primary'
className={classes.button}>
ADD
</Button>
</form>
)
}
}
MediaForm.propTypes = {
classes: PropTypes.object.isRequired
}
export default withRoot(withStyles(styles)(MediaForm))
最佳答案
你不需要引用。提交事件包含表单作为目标。您可以通过 form.elements
访问表单中的输入:
handleSubmit (event) {
const { title, colour } = event.currentTarget.elements;
event.preventDefault();
window.alert(`New colour: ${title.value} ${colour.value}`);
}
关于您的引用问题:this.name
指的是什么?您没有在任何地方声明它,所以它是 undefined
。将 undefined
传递给 ref
属性无效。此外,如何将两个输入引用绑定(bind)到同一个实例属性 name
。您是否知道渲染函数中的 this
是指 MediaForm
组件的实例,因此 this.name
是一个属性 组件实例上的名称
(未定义)?
如果您想为每个输入获取单独的引用,您应该使用 callback pattern .注意 String refs are deprecated并且不应使用:
render() {
return(
<TextField
name='title'
type='text'
label='Title'
placeholder='Movie title...'
autoFocus
inputProps={{ref: input => this.titleInput = input}}
required
/>
);
}
编辑:
您可能想要的是 controlled component .在此模式中,您的父组件会跟踪其子组件的值(通常是输入):
class MediaForm extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
colour: '',
};
}
handleChange = event => {
const {name, value} = event.currentTarget;
this.setState({[name]: value});
};
handleSubmit = event => {
event.preventDefault();
const {title, colour} = this.state;
window.alert(`New colour: ${title} ${colour}`);
};
render() {
const {classes} = this.props;
const {title, colour} = this.state;
return (
<form className={classes.root} onSubmit={this.handleSubmit}>
<div className={classes.field}>
<TextField
name="title"
type="text"
value={title}
onChange={this.handleChange}
label="Title"
placeholder="Movie title..."
required
/>
</div>
<div className={classes.field}>
<Tooltip title="Add a colour the reflects the mood of the film">
<TextField
name="colour"
type="color"
value={colour}
onChange={this.handleChange}
label="Mood"
required
/>
</Tooltip>
</div>
<Button
type="submit"
variant="raised"
color="primary"
className={classes.button}
>
ADD
</Button>
</form>
);
}
}
现在您的 parent 可以通过 this.state.title
和 this.state.colour
完全控制和访问每个输入的值。这里也不需要任何引用。
关于javascript - 在 Material-UI 中使用 React 的 'ref' 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49896139/