Question

我正在尝试构建可重用的表单和输入组件，到目前为止能够实现我的目标，这是它们在LoginPage组件中的使用方式

import React from 'react'
import classNames from 'classnames/bind'
import styles from './style.scss'
import Form from 'components/Form'
import Input from 'components/Input'

const cx = classNames.bind(styles)

export default class LoginPage extends React.Component {
  constructor (props) {
    super(props)
    this.loginUser = this.loginUser.bind(this)
  }

  loginUser () {
    console.log(`
      Email: ${this.refs.email.state.value} Password: ${this.refs.password.state.value}
    `)
  }

  render () {
    return (
      <main className={cx('LoginPage')}>
        <div className={cx('container')}>
          <Form onSubmit={this.loginUser}>
            <Input type='email' placeholder='email' ref='email' />
            <Input type='password' placeholder='password' ref='password' />
            <Input type='submit' value='Log in' />
          </Form>
        </div>
      </main>
    )
  }
}

我问的问题是，使用this.refs.email.state.value是否是一种有效的方法，从状态获取输入组件值？

Answer 1

我认为您的案件不需要refs。请记住，当props的正常数据流可以完成相同操作时，不应使用它们。来自the docs

如果您还没有使用React编写多个应用程序，那么您的第一个应用程序倾向通常是尝试使用refs来制造东西发生＆＃34;在你的应用程序中如果是这种情况，请花一点时间思考更多批判性的关于组件中应该拥有哪个州层次结构。 通常情况下，显而易见的是，＃34;拥有＆＃34;那状态在层次结构中处于更高级别。将状态置于其中通常会消除任何使用refs以使事情发生的愿望。 - 相反，数据流通常会实现您的目标。

另一个警告标志应该是string refs are considered legacy并且将被弃用。

实现所需内容的更好，更安全的方法是单独处理输入更改并将其保持在本地组件状态。所以你的代码看起来像这样：

// ...imports...

const cx = classNames.bind(styles)

const initialState = {
  eamil: '',
  password: '',
};

export default class LoginPage extends React.Component {
  constructor (props) {
    super(props);
    this.loginUser = this.loginUser.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    let nextState = {};
    nextState[e.target.name] = e.target.value;
    this.setState(nextState);
  }

  loginUser () {
    e.preventDefault();
    console.log(`
      Email: ${this.state.email} Password: ${this.state.password}
    `)
  }

  render () {
    return (
      <main className={cx('LoginPage')}>
        <div className={cx('container')}>
          <Form onSubmit={this.loginUser}>
            <Input 
              type='email' 
              value={this.state.email} 
              placeholder='email' 
              onChange={this.handleChange}
            />
            <Input 
              type='password' 
              value={this.state.password} 
              placeholder='password' 
              onChange={this.handleChange}
            />
            <Input type='submit' value='Log in' />
          </Form>
        </div>
      </main>
    )
  }
}

此处状态位于表单组件的顶部。你可以使它更加通用，并且form Redux商店有自己的动作和减速器，但它应该给你一个想法。

如果您对代码有疑问，请与我们联系。

Answer 2

请使用this.refs.email.value而不是this.refs.email.state.value。是的，它是反应的标准方式

OR

您可以附加eventListener onClick并将电子邮件保持在状态。

export default class LoginPage extends React.Component {
  constructor (props) {
    super(props)
    this.loginUser = this.loginUser.bind(this)
  }

  loginUser () {
    console.log(`
      Email: ${this.refs.email.value} Password: ${this.refs.password.value}
    `)
  }

  changeEmail(event) {
   this.setState({
       email: event.target.value
  }

  render () {
    return (
      <main className={cx('LoginPage')}>
        <div className={cx('container')}>
          <Form onSubmit={this.loginUser}>
            <Input type='email' value={this.state.value} onClick={this.changeEmail} placeholder='email' ref='email' />
            <Input type='password' placeholder='password' ref='password' />
            <Input type='submit' value='Log in' />
          </Form>
        </div>
      </main>
    )
  }
}

这对获取输入状态值有效吗？

2 个答案: