使用带有另一个无状态组件的道具更新组件 state

Question

我想在无状态组件“InputRetro”中更新有状态组件“LoginForm”的 state 我不知道实现它的正确方法。 请帮我。

'LoginForm' 组件代码：

import React, { Component } from 'react';
import './LoginForm.css';

import InputRetro from './InputRetro';

class LoginForm extends Component {

    state = {
        loginData : {
            username : null,
            password : null,
        },
        inputs : [
            { id : 'username', label : 'Username', type : 'text' },
            { id : 'password', label : 'Password', type : 'password' },
        ],
    }

    inputsJSX = this.state.inputs.map(input => {
        return (
            <InputRetro id={input.id} label={input.label} type={input.type} key={input.id} />
        );
    });

    handleLogin = e => {
        e.preventDefault();
        // blank function.
    }

    render() {
        return (
            <form className='login-form' onSubmit={this.handleLogin}>
                { this.inputsJSX }
            </form>
        );
    }
}

export default LoginForm;

'InputRetro' 组件代码：

import React from 'react';
import './InputRetro.css';

let InputRetro = props => {
    const { id, label, type, placeholder } = props;
    return (
        <div className='InputRetro'>
            <label>{label}</label>
            <input id={id} type={type} placeholder={placeholder} />
        </div>
    );
}

export default InputRetro;

I want to update 'LoginForm' component's state values inside of 'InputRetro' component using an onChange or onKeyUp the state values I want to change are state.loginData.username and state.loginData.password when the input tag value of 'InputRetro' component被改变。

更多细节：

state.loginData.username 值将存储带有 onChange 或 onKeyUp 事件的用户名 ID 的“InputRetro”组件输入标签的值。 state.loginData.password 中相同。

Answer 1

您可以将 CallBack function 从父组件（LoginForm）传递给子组件（Input Retro），然后在按钮单击时在子组件中触发该操作。

登录表单.js

import React, { Component } from 'react';
import './LoginForm.css';

import InputRetro from './InputRetro';

class LoginForm extends Component {

    state = {
        loginData : {
            username : null,
            password : null,
        },
        inputs : [
            { id : 'username', label : 'Username', type : 'text' },
            { id : 'password', label : 'Password', type : 'password' },
        ],
    }
    
    const ChangeState = (childData, flag) => {
        flag === 1 ? state.loginData.username = childData : state.loginData.password = childData
    }

    inputsJSX = this.state.inputs.map(input => {
        return (
            <InputRetro id={input.id} label={input.label} type={input.type} callBackHandler={ChangeState} key={input.id} />
        );
    });

    handleLogin = e => {
        e.preventDefault();
        // blank function.
    }

    render() {
        return (
            <form className='login-form' onSubmit={this.handleLogin}>
                { this.inputsJSX }
            </form>
        );
    }
}

export default LoginForm;

在子组件中，您可以随时调用回调 function。

InputRetro.js

import React from 'react';
import './InputRetro.css';

let InputRetro = props => {
    const { id, label, type, placeholder, callBackHandler } = props;
    const handleClick = (event) => {
        label === 'email' ? callBackHandler(event.target.value, 1) : callBackHandler(event.target.value, 2)
    }
    return (
        <div className='InputRetro'>
            <label>{label}</label>
            <input id={id} type={type} placeholder={placeholder} onChange={event => handleClick(event)} />
        </div>
    );
}

export default InputRetro;