将React的“ref”属性与材质UI一起使用

Question

我试图在Material UI的TextField上使用React的“ref”属性访问输入数据。通过“inputRef”或“inputProps”似乎没有一种简单的方法可以做到这一点。

下面的示例显示了第26行的inputProps的使用。将TextField的名称指定给“ref”属性似乎不会生成有效的对象。

对于“inputRef”，根据Material ui文档，它强制使用函数，尝试将字段数据作为属性传入也不起作用。例：（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))

Answer 1

class MediaForm extends Component {
  refs = {}  // <____ notice this
  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
            inputProps={{ref => this.refs.title = ref}}
            name='title'
            type='text'
            label='Title'
            placeholder='Movie title...'
            autoFocus
            required />
        </div>
        <div className={classes.field}>
          <Tooltip title='Add a colour the reflects the mood of the film'>
            <TextField
              name='colour'
              inputProps={{ref => this.refs.colour = ref}}
              type='color'
              label='Mood'
              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))

Answer 2

你不需要参考文献。submit事件包含作为目标的表单。您可以通过表单访问表单中的输入。元素：

handleSubmit (event) {
    const { title, colour } = event.currentTarget.elements;
    event.preventDefault();
    window.alert(`New colour: ${title.value} ${colour.value}`);
}

关于你的参考文献的问题：。名称请参阅？您没有在任何地方声明它，因此它是未定义的。将undefined传递到ref道具无效。另外，如何将两个输入引用绑定到同一实例属性name。您是否知道渲染函数中的this引用了MediaForm组件的实例，因此this。name是组件实例（未定义）上的属性name？

如果要获得每个输入的单个引用，则应使用回调模式。请注意，字符串引用已弃用，不应使用：

render() {
    return(
        <TextField
            name='title'
            type='text'
            label='Title'
            placeholder='Movie title...'
            autoFocus
            inputProps={{ref: input => this.titleInput = input}}
            required 
        />
    );
}

编辑：

你可能想要的是所谓的受控组件。在此模式中，父组件跟踪其子组件的值（通常是输入）：

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>
        );
    }
}

现在，您的父级可以通过this.state.title和this.state.colour完全控制和访问每个输入的值。这里也不需要任何裁判。