Question

我试图制作可重复使用的表单和输入组件，到目前为止还要遵循：

表格

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

const cx = classNames.bind(styles)

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

  submitForm (e) {
    e.preventDefault()
    this.props.onSubmit()
  }

  render () {
    return (
      <form className={cx('Form')} onSubmit={this.submitForm}>
        {this.props.children}
      </form>
    )
  }
}

Form.propTypes = {
  children: React.PropTypes.any.isRequired,
  onSubmit: React.PropTypes.func.isRequired
}

输入

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

const cx = classNames.bind(styles)

export default class Input extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value: this.props.value || ''
    }
    this.changeValue = this.changeValue.bind(this)
  }

  changeValue (e) {
    this.setState({value: e.target.value})
  }

  render () {
    return (
      <div className={cx('Input')}>
        <input
          type={this.props.type}
          value={this.state.value}
          required={this.props.required}
          onChange={this.changeValue}
          placeholder={this.props.placeholder || ''}
          noValidate />
      </div>
    )
  }
}

Input.propTypes = {
  type: React.PropTypes.string.isRequired,
  value: React.PropTypes.string,
  required: React.PropTypes.bool,
  placeholder: React.PropTypes.string
}

然后我在另一个组件中使用它们，让我们说HomePageComponent

<Form onSubmit={this.loginUser}>
  <Input type='email' placeholder='email' />
  <Input type='password' placeholder='password' />
  <Input type='submit' value='Submit' />
</Form>

这一切都运行良好，但我如何获取输入值并使用它们将状态HomePageComponent设置为this.state= { email: [value from input email], password: [value from password input] }

Answer 1

您不需要将值存储在Input组件中。

您可以通过将references保留到各个输入来获取输入值：

<Form onSubmit={this.loginUser}>
  <Input ref='email' type='email' placeholder='email' />
  <Input ref='password' type='password' placeholder='password' />
  <Input type='submit' value='Submit' />
</Form>

然后，在loginUser中，您可以使用以下方式访问这些：

const email = ReactDOM.findDOMNode(this.refs.email).value;
const password = ReactDOM.findDOMNode(this.refs.password).value;

Answer 2

如果将name属性添加到输入元素，则可以通过这种方式访问它们的值。希望这有帮助

＆＃13;

import React, { PropTypes, Component } from 'react';
class Form extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleSubmit(e) {
    e.preventDefault();
    const form = e.target.elements;
    console.log(form.email.value);
    console.log(form.password.value);
  }
  
  render() {
    return (
      <form className={cx('Form')} onSubmit={this.handleSubmit}>
        <Input type='email' placeholder='email' name='email' />
        <Input type='password' placeholder='password' name='password' />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

＆＃13;

正确使用表单和输入元素

2 个答案: