Question

我有一个文本框组件

import React,{ Component } from 'react';
export default class Textbox extends Component {
      render() {   return (<input /> )}
    }

另一个组件代码是

import Textbox from '../forms/Textbox.jsx'

export default class LoginPage extends Component {
  render(){

return (
   <Textbox type="tel" id="login-mobile" required/>

 )}
}

来自id的控制台显示输入为空，而HTML视图为

<input class="not-empty">

Answer 1

我不确定你在尝试什么，但你发送像道具一样的id到组件TextBox，所以如果你想通过道具将id发送到Textbox，你必须在Textbox中设置渲染 - <input id={this.props.id} /> U应该在<input id=.. type=.../>中设置id / type，而不是在LoginPage的渲染中。整个代码看起来 -

import Textbox from '../forms/Textbox.jsx'

export default class LoginPage extends Component {
  render(){

return (
   <Textbox type="tel" id="login-mobile"/>

 )}
}

和文本框 -

 import React,{ Component } from 'react';
    export default class Textbox extends Component {
          render() {   return (<input id={this.props.id} type={this.props.type} /> )}
        }

Answer 2

我认为这会对你有所帮助：

道具和州有关系。一个组件的状态通常会成为子组件的支柱。道具传递给孩子：

<MyChild name={this.state.childsName} />

childsName的父状态值成为子的this.props.name。从孩子的角度来看，名称prop是不可变的。一个自然的后续问题是：如果孩子需要更改其名称支柱怎么办？这通常通过子事件和父回调来完成。孩子可能会暴露一个名为onNameChanged的事件。然后，父级将通过传递回调处理程序来订阅该事件。

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

孩子会通过调用例如this.props.onNameChanged（＆＃39; New name＆＃39;）来传递它请求的新名称作为事件回调的参数，并且父母将使用事件处理程序中的名称，用于更新其状态。

handleName: function(newName) {
   this.setState({ childsName: newName });
}

未捕获的TypeError：无法读取null的属性'value'（React js组件id传递其他组件）

2 个答案: