Question

我是React的新手，有点困惑。我已经阅读了一遍，人们说您不需要访问其他组件状态。

所以我有两个类：Login.js和InputBox.js（还有其他几个-在这种情况下不应该有所作为）。

InputBox是一个类，包含一个带有onChange事件的引导Form.Control，该事件将在状态中存储输入的值。我制作了此类，以便在创建其他表单时可以快速重用代码。当然，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

Login.js

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

谢谢

Answer 1

您似乎正在编写POST请求，以从Login组件将登录凭据发送到后端。

我将状态和处理程序方法从输入组件提升到登录组件。

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

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>

            </>
        )
    }
}

此外，我认为您可能还需要在表单输入中使用“名称”属性。

Answer 2

在登录名上创建句柄输入功能

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

调用InputBox组件时，传入一个名为inputValue的道具，该道具将基本上处理输入。

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

在InputBox组件上，调用inputValue属性，并在props函数中解析输入的值。

    changeHandler = (event) => {
        props.inputValue(event.target.value);

        this.setState({
            textInput: event.target.value
        })
    }

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

您基本上可以让您的inputBox处理Login的setInput的状态。

我希望这是有道理的

反应：与访问另一个组件状态的混淆

2 个答案: