Question

我是Reactjs的新手，我正在尝试使用this.refs.myComponent来获取imput字段的值，但是此输入字段嵌套在另一个react组件中。让我分享一个我的意思的例子：

想象一下，我有这个：

class ParentComponent extends React.Component {
    onFormSubmit(e) {
        console.log(this.refs.childName);
    }

    render() {
        return (
            <form onSubmit={this.onFormSubmit.bind(this)}>
                <ChildComponent refName='childName'/>
                <button type='submit'>Submit</button>
            </form>
        );
    }
}

class ChildComponent extends React.Component {
    render() {
        return (
            <input type='text' ref={this.props.refValue} name={this.props.refValue} id={this.props.refValue}/>
        );
    }
}

问题是当我调用this.refs.childName时我不能将值作为表单提交事件的一部分而不执行像evt.target.childName.value这样的事情吗？

此致

Answer 1

一般来说，refs不是处理将UI数据（React中的状态）传递给子组件的首选方法。最好避免在可能的情况下使用ref。

This是对道具和组件之间关系的一个很好的解释。

并且this解释了React框架中关于状态的状态和一些核心信念。

所以这里有一个例子来完成你想要做的事情，在一个＆＃34; React friendly＆＃34;办法。你的ChildComponent可以是stateless，因此它只有一个责任，就是将道具传递给它，其道具在ParentComponent中处理为状态。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

const ChildComponent = (props) => {
   return (
     <input 
        type='text' 
        value={props.textValue} 
        onChange={props.onTextChange}
     />
   )
}

class ParentComponent extends Component {
    constructor(props) {
      super(props)

      this.onFormSubmit = this.onFormSubmit.bind(this)
      this.onTextChange = this.onTextChange.bind(this)

      this.state = {
        textValue: ''
      }
    }

    onFormSubmit(e) {
      e.preventDefault()
      console.log(`You typed: ${this.state.textValue}`)
    }

    onTextChange(e) {
      this.setState({textValue: e.target.value})
    }

    render() {
        return (
            <form onSubmit={this.onFormSubmit}>
                <ChildComponent 
                  textValue={this.state.textValue}
                  onTextChange={this.onTextChange}
                />
                <button type='submit'>Submit</button>
            </form>
        )
    }
}

// assumes you have an element with an id of 'root'
// in the root html file every React app has
ReactDOM.render(<ParentComponent/>, document.getElementById('root'))

我强烈建议您使用create-react-app来快速轻松地运行React应用，而无需执行任何操作。

希望它有所帮助。

将嵌套的react组件子元素的值传递给onSubmit句柄函数

1 个答案: