ReactJS - 输入组件数据传递答案

【问题标题】：ReactJS - Input Components data passingReactJS - 输入组件数据传递
【发布时间】：2016-03-11 22:15:40
【问题描述】：

我正在编写我的第一个组件，但我遇到了数据绑定问题

我想要的是在我的 LoginView 中获取字段的值，以便我可以在 handleSubmit 中将它们进一步传递到一个向后端发出请求的函数中。

我之前写过这个没有组件的表单，但后来我决定通过将每个表单拆分成小组件来改进它。

问题是我不明白 LoginView 和 TextInput 之间的数据传递是如何工作的。

文本输入组件

import React, {PropTypes} from 'react'
import classNames from 'classnames/bind';

class TextInput extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    placeholder: PropTypes.string,
    label: PropTypes.string,
    type: PropTypes.string,
    value: PropTypes.any
  }

  constructor(props) {
    super(props)
    this.state = {is_valid: true}
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    console.log(event, this.props)
    this.props.value = event.target.value
    console.log(this.props)
  }

  render() {
    var divClasses = classNames({
      'form-group': true,
      'has-danger': !this.state.is_valid
    })
    var inputClasses = classNames({
      'form-control': true,
      'form-control-danger': !this.state.is_valid
    })
    console.log(this.props.value)
    return (
      <div className={divClasses}>
        <label htmlFor={this.props.name}>{this.props.label}</label>
        <input type={this.props.type} className={inputClasses}
               id={'id_'+ this.props.name}
               placeholder={this.props.placeholder}
               name={this.props.name}
               value={this.props.value}
               onChange={this.handleChange}
        />
      </div>
    )
  }
}

export default TextInput

查看

import React from 'react'
import TextInput from 'components/TextInput'
import EmailInput from 'components/EmailInput'
import PasswordInput from 'components/PasswordInput'

export class LoginView extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: '',
      remember_me: false
    }
  }

  handleSubmit = (e) => {
    e.preventDefault()
  }

  handleChange = (e) => {
    console.log(e.target.name, e.target.value)
    var key = e.target.name
    var value = e.target.value.trim()
    var data = {}
    data[key] = value
    this.setState(data)
  }

  render() {
    console.log(this.state)
    return (
      <div className='row'>
        <div className='col-md-offset-4 col-md-4'>
          <form role='form' className='form form-horizontal' onSubmit={this.handleSubmit} noValidate="novalidate">
            <TextInput name='Email' label='Email' type='text' placeholder='Email' value={this.state.email} />
            <PasswordInput value={this.state.password} onChange={this.handleChange.bind(this)}/>
            <div className='checkbox'>
              <label><input type='checkbox' name='remmeber_me' onChange={this.handleChange}/> Keep me logged in</label>
            </div>
            <div className='clearfix'>
              <button className='btn btn-primary btn-lg btn-block' type='submit'>Login</button>
            </div>
          </form>
        </div>
      </div>
    )
  }
}

export default LoginView

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

当两个组件具有父子关系时，在它们之间传递数据会容易得多。亲子交流，简单的传递props。 React 文档链接：https://facebook.github.io/react/tips/communicate-between-components.html

“在React中，owner就是设置其他组件的props的组件。更正式的说，如果一个组件X是在组件Y的render()方法中创建的，就说X是Y所有的。前面已经讨论过了, 组件不能改变它的 props——它们总是与它的所有者设置的一致。这个基本的不变量导致 UI 保证是一致的。”

通常最好有一个“父”组件来处理所有状态更改

更多关于所有权的信息：https://facebook.github.io/react/docs/multiple-components.html#ownership

【讨论】：