如何更新父母的状态? [英] How to update parent's state?

问题描述

我是新来的反应者，试图更新父母的状态，但到目前为止还没有运气.

组件

class InputBox extends Component {
  constructor(props) {
    super(props);
    this.type = props.type;
  }
  render() {
    return (
      <div>
        <input type={this.type}/>
      </div>
    );
  }
}

我要使用此组件切换密码的其他容器

constructor(props) {
  super(props);
  this.state = {
    type: 'password',
    wording: 'Show',
  };
  this.changeState = this.changeState.bind(this);
}

changeState() {
  const oldState = this.state.type;
  const isTextOrHide = (oldState === 'password');
  const newState = (isTextOrHide) ? 'text' : 'password';
  const newWord = (isTextOrHide) ? 'Hide' : 'Show';
  this.setState({
    type: newState,
    label: newWord,
  });
}

<Wrapper>
  <InputBox type={this.state.type} />
  <Toggle onClick={this.changeState}>{this.state.wording}</Toggle>
</Wrapper>

解决方案

您可以这样做:

首先，父级组件:

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

class componentName extends Component {
  state = {
    password: '',
    type: 'password',
    wording: 'Show',
  }

  handleShow = (word) => {
    this.setState({ wording: word })
  }

  handleChange = (e) => {
    if(!this.state.password){ 
      handleShow('Show')
    } else  {
      handleShow('Hide')
    }
    this.setState({ password: e.target.value })
  }

  render() {
    return (
      <div>
        <Wrapper>
          <InputBox
           name='password'  
           handleChange={this.handleChange} 
           password={this.state.password}
           type={this.state.type} /> . 
          <Toggle onClick={this.changeState}>{this.state.wording}
         </Toggle>
        </Wrapper>
      </div>
    );
  }
}

现在子组件:

import React from 'react';

export const InputBox = (props) => (
  <input onChange={props.handleChange} value={props.password} type={props.type}/>
)

1. state必须始终保留在父级中，然后再通过props
传递给父级
2. 子组件通常是无状态的，这意味着它们不必是class(可以只是一个返回jsx的函数)，并且导入最多，不能具有state(状态仅在Class components)
中可用

始终将状态传递给子组件 因为无论state向下走多远，通过props 都将始终更改源，在本例中为源，即状态的创建者

另一件事:

如果使用箭头功能ES6，则无需constructor即可绑定功能.

像这样:handleSomething = () => { return ... }

另一件事:

您不需要constructor来设置state，只需执行

state = { } 

，它会自动成为上下文this

的一部分

这样思考，您将永远不会失败.

希望它对您有所帮助:)

I am new to react and trying to update parent's state but no luck so far.

Component

class InputBox extends Component {
  constructor(props) {
    super(props);
    this.type = props.type;
  }
  render() {
    return (
      <div>
        <input type={this.type}/>
      </div>
    );
  }
}

Other container where I want to use this component to toggle password

constructor(props) {
  super(props);
  this.state = {
    type: 'password',
    wording: 'Show',
  };
  this.changeState = this.changeState.bind(this);
}

changeState() {
  const oldState = this.state.type;
  const isTextOrHide = (oldState === 'password');
  const newState = (isTextOrHide) ? 'text' : 'password';
  const newWord = (isTextOrHide) ? 'Hide' : 'Show';
  this.setState({
    type: newState,
    label: newWord,
  });
}

<Wrapper>
  <InputBox type={this.state.type} />
  <Toggle onClick={this.changeState}>{this.state.wording}</Toggle>
</Wrapper>

解决方案

You can do like this:

First, Parent component:

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

class componentName extends Component {
  state = {
    password: '',
    type: 'password',
    wording: 'Show',
  }

  handleShow = (word) => {
    this.setState({ wording: word })
  }

  handleChange = (e) => {
    if(!this.state.password){ 
      handleShow('Show')
    } else  {
      handleShow('Hide')
    }
    this.setState({ password: e.target.value })
  }

  render() {
    return (
      <div>
        <Wrapper>
          <InputBox
           name='password'  
           handleChange={this.handleChange} 
           password={this.state.password}
           type={this.state.type} /> . 
          <Toggle onClick={this.changeState}>{this.state.wording}
         </Toggle>
        </Wrapper>
      </div>
    );
  }
}

Now the child component:

import React from 'react';

export const InputBox = (props) => (
  <input onChange={props.handleChange} value={props.password} type={props.type}/>
)

1. The state needs to always remain in the parent and then pass it down through props
2. The children components usually are stateless, which means, they don't need to be a class (can be just a function that returns jsx ) and the most import, can't have state (state is only available in Class components)

Always pass the state down to children components Because no matter how far down the state is, by being passed through props it'll will always change the source, which in this case is the parent, the creator of the state

another important thing:

If you use arrow functions ES6 , there's no need to have a constructor to bind your functions.

Like this: handleSomething = () => { return ... }

another thing:

you don't need the constructor to set the state, you can simply do

state = { } 

and it automatically become part of the context this

Thinking this way you'll never fail.

Hope it helped you :)

这篇关于如何更新父母的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！