Question

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

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

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

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

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

Answer 1

当他们有父子关系时，在两个组件之间传递数据要容易得多。对于亲子沟通，只需传递道具。链接到React docs：https://facebook.github.io/react/tips/communicate-between-components.html

“在React中，所有者是设置其他组件的道具的组件。更正式地说，如果在组件Y的render（）方法中创建组件X，则说X由Y拥有。如前所述，一个组件不能改变它的道具 - 它们总是与它的所有者设置的一致。这个基本的不变量导致UI保证一致。“

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

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

ReactJS - 输入组件数据传递

1 个答案: