主页 / 问题 / 1185210
Accepted
MrYogurt
Asked:2020-10-02 19:00:56 +0800 CST2020-10-02 19:00:56 +0800 CST

在组件之间传递状态

  • 772

使用 handleAddElement 按钮，我将输入的结果添加到 names 数组，但是 Show 组件在没有状态的情况下看不到这个结果，据我所知，我尝试跟踪其中数组的状态，但是没有有用，告诉我问题是什么。

let names = [
    'name1',
    'name2',
    'name3',
];


function ElementList(props) {
    let names = props.names;
    return (
        names.map((name) =>
            <Element key={name} brand={name}/>
        ));
}

class Element extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            input: ''
        };
    }

.....

    handleAddElement = (e) => {
        e.preventDefault();
        const {input} = this.state;
        this.setState({
            input: ''
        });
        names.push(input);
    }

    render () {
        const {input} = this.state;
        return (
            .....
                    <button onClick={this.handleAddElement}>Добавить</button>
            .....
        )
    }
}

class Show extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            names: names
        };
    }

    render() {
        return (
            <div>
                <ElementList names={names}/>
            </div>
        );
    }
}

reactjs

1 个回答

  1. Best Answer

    你有 3 个组件。

    1. Show- 主要组件，以某种方式接收名称数据并将其作为道具传递给 ElementList。
    2. ElementList- 接收作为 props 构建组件的名称数组Element
    3. Element- 最终组件

    因此，Show它必须将状态存储在自身中names，并将其更改的第 f 个转移到Element

    你怎么了Element？他过着自己的生活。

    仔细阅读文档

    class Element extends React.Component {

    constructor (props) {
        super(props);
        //что вообще этот стейт делает и для чего он нужен?
        this.state = {
            input: ''
        };
    }

.....

    handleAddElement = (e) => {
        e.preventDefault();
        const {input} = this.state;
        this.setState({
            input: ''
        });
        names.push(input); // это что? откуда кмпонент знает про существование names?
    }

    render () {
        const {input} = this.state;
        return (
            /* const { input } = this.state; это что вобще?*/
            <button onClick={this.handleAddElement}>Добавить</button> 
        )
    }
}

    它必须是这样的

    class Show extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            names
        };
    }

    addName(name) {
        this.setState((prevState) => ({ names: [...prevState.names, name] }))
    }

    render() {
        return (<div >
            //пробрасываем ф-ю изменения состояния, не забываем биндить
            <ElementList names={names} addName={this.addName.bind(this)} />
        </div>
        );
    }
}


function ElementList({ names, addName }) {
    return (
        names.map((name) =>
        // пробрасываем ф-ю до компонента - addName={addName}
            <Element key={name} brand={name} addName={addName} /> 
        ));
}


class Element extends React.Component {

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

    handleAddElement = (e) => {
        e.preventDefault();
        this.props.addName(this.state.input)
    }

    render() {
        //Тут еще, видимо, <input /> должен быть
        return <button onClick={this.handleAddElement}> Добавить </button>
    }
}

    • 1

相关问题