Reactjs 反应：与访问其他组件状态混淆

我对反应完全陌生，有点困惑。我读过很多书，人们说你不需要访问另一个组件状态

所以我有两个类：Login.js和InputBox.js（还有一些——在这种情况下不会有什么区别）

InputBox是一个类，它包含一个引导窗体。控件，该控件带有一个onChange事件，该事件将在状态中存储输入的值。我创建了这个类，以便在创建其他表单时可以快速重用代码。为了向我的后端发送请求，Login.js肯定需要能够访问状态才能获得该值吗？我的思维过程可能是完全错误的。。如果是这样，我道歉

InputBox.js

import React, { Component } from 'react'
import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'
import FormGroup from 'react-bootstrap/FormGroup'

class InputBox extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             textInput: ""
        }
    }

    changeHandler = (event) => {
        this.setState({
            textInput: event.target.value
        })
    }
    
    render() {
        return (
            <>
            <FormGroup>
                <Col md={3}>
                    <Form.Label>{this.props.label}</Form.Label>
                    <Form.Control type={this.props.type} placeholder={this.props.placeholder} onChange={this.changeHandler} value={this.state.textInput} />
                    <Form.Text className="text-muted">
                        {this.props.description}
                    </Form.Text>
                </Col>
            </FormGroup>

            </>
        )
    }
}

export default InputBox

import React, { Component } from 'react'
import "../css/App.css"
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container'

import FormArea from '../molecule/FormArea';
import InputBox from '../molecule/InputBox';

class Login extends Component {
  render() {
    return (
      <div className="Login">
        <Container fluid>
          <FormArea>

            <InputBox type="text" label="Username" placeholder="Enter username" description="We will never pass your information!" />

            <InputBox type="password" label="Password" placeholder="Enter password" />

          </FormArea>
      </Container>
    </div>
    )
  }
}

export default Login

import React，{Component}来自“React”
从“react引导/表单”导入表单
从“反应引导/Col”导入Col
从“react引导/FormGroup”导入FormGroup
类InputBox扩展组件{
建造师（道具）{
超级（道具）
此.state={
文本输入：“
}
}
changeHandler=（事件）=>{
这是我的国家({
text输入：event.target.value
})
}
render（）{
返回(
{this.props.label}
{this.props.description}
)
}
}
导出默认输入框

Login.js

import React, { Component } from 'react'
import Form from 'react-bootstrap/Form'
import Col from 'react-bootstrap/Col'
import FormGroup from 'react-bootstrap/FormGroup'

class InputBox extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             textInput: ""
        }
    }

    changeHandler = (event) => {
        this.setState({
            textInput: event.target.value
        })
    }
    
    render() {
        return (
            <>
            <FormGroup>
                <Col md={3}>
                    <Form.Label>{this.props.label}</Form.Label>
                    <Form.Control type={this.props.type} placeholder={this.props.placeholder} onChange={this.changeHandler} value={this.state.textInput} />
                    <Form.Text className="text-muted">
                        {this.props.description}
                    </Form.Text>
                </Col>
            </FormGroup>

            </>
        )
    }
}

export default InputBox

import React, { Component } from 'react'
import "../css/App.css"
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container'

import FormArea from '../molecule/FormArea';
import InputBox from '../molecule/InputBox';

class Login extends Component {
  render() {
    return (
      <div className="Login">
        <Container fluid>
          <FormArea>

            <InputBox type="text" label="Username" placeholder="Enter username" description="We will never pass your information!" />

            <InputBox type="password" label="Password" placeholder="Enter password" />

          </FormArea>
      </Container>
    </div>
    )
  }
}

export default Login

import React，{Component}来自“React”
导入“./css/App.css”
导入'bootstrap/dist/css/bootstrap.min.css'；
从“react引导/容器”导入容器
从“../molecule/FormArea”导入FormArea；
从“../molecule/InputBox”导入InputBox；
类登录扩展组件{
render（）{
返回(
)
}
}
导出默认登录名

---

谢谢

看起来您将编写一个POST请求，从登录组件向后端发送登录凭据

我将把state和handler方法从输入组件提升到登录组件中

然后通过道具将状态和处理程序从登录传递到输入组件

class Login extends Component {
    state = {
       username: "",
       password: "",
    }

   changeHandler = (event)  => {
      this.setState({[event.target.field]: event.target.value })
   }
    
  render() {
    return (
      <div className="Login">
        <Container fluid>
          <FormArea>

            <InputBox changeHandler={this.changeHandler} value={this.state.username} type="text" label="Username" placeholder="Enter username" description="We will never pass your information!" />

            <InputBox changeHandler={this.changeHandler} value={this.state.password} type="password" label="Password" placeholder="Enter password" />

          </FormArea>
      </Container>
    </div>
    )
  }
}

class InputBox extends Component {
    
    render() {
        return (
            <>
            <FormGroup>
                <Col md={3}>
                    <Form.Label>{this.props.label}</Form.Label>
                    <Form.Control type={this.props.type} placeholder={this.props.placeholder} onChange={this.props.changeHandler} value={this.props.value} />
                    <Form.Text className="text-muted">
                        {this.props.description}
                    </Form.Text>
                </Col>
            </FormGroup>

            </>
        )
    }
}

类登录扩展组件{
状态={
用户名：“”，
密码：“”，
}
changeHandler=（事件）=>{
this.setState（{[event.target.field]：event.target.value}）
}
render（）{
返回(
)
}
}
类InputBox扩展组件{
render（）{
返回(
{this.props.label}
{this.props.description}
)
}
}

---

此外，我相信您可能还需要在表单输入上有一个“name”道具。

在登录时创建handle输入函数

function handleInput(someValue){
    setInput(someValue);   //create state for inputs
}

当您调用InputBox组件时，传入一个名为inputValue的prop，它将基本上处理输入

<InputBox changeHandler={this.changeHandler} value={this.state.username} 
       type="text" label="Username" placeholder="" 
       inputValue={handleInput}
/>

您在InputBox的inputValue属性上解析的值现在可以在登录组件中访问

基本上，您可以让inputBox处理登录的setInput的状态

我希望这是有道理的