代码之家 › 专栏 › 技术社区 › JChao

单击按钮,从localstorage加载一些内容,并在函数外部显示它

reactjs

JChao · 技术社区 · 7 年前

我不知道这个话题是否有意义,但我想:

单击一个按钮
把按钮换成装好的东西

const getToken = (props) => {
    let token = localStorage.getItem("token");
    console.log('token', token);
    return token;

}

const ApiInstruction = (props) => (
    <div>
        <Backdrop show={props.show} clicked={props.modalClosed}/>

        <div className="api-instruction"
             style={{transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
                     opacity: props.show ? '1': '0'}}>
            <button className="api-instruction-button" onClick={() => getToken(props)}>Request Token</button>
            <h4>Instruction on how to use API:</h4>
            <p>bleh</p>
            <p>(click anywhere in grey to close)</p>
        </div>
    </div>
);

点击按钮会触发 getToken

我的电流 ApiInstrction

<ApiInstruction show={this.state.openApiInsModal} modalClosed={this.BackdropHandler} token={null}/>

我怎么用我从电话里得到的东西来替换按钮?有可能吗?

3 回复 | 直到 7 年前

ilim 7 年前

您正在使用无状态功能组件来实现所需的功能。但是,您的组件需要一个状态概念,以便能够跟踪它们是否已从本地存储检索到令牌。这就是为什么在React中有状态为的组件,在本例中,您应该使用状态,而不是无状态组件。

下面是一个代码示例,说明了state的用法可能有什么帮助。

class ApiInstruction extends Component {
    state = {
    };

    getToken = (props) => {
        let token = localStorage.getItem("token");
        console.log('token', token);
        return token;
    }

    handleClick = (event) => {
        this.setState({token: getToken(this.props);});
    }

    render() {
        if(this.state.token === undefined) {
            return (
                <div>
                    <Backdrop show={props.show} clicked={props.modalClosed}/>

                    <div className="api-instruction"
                         style={{transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
                                 opacity: props.show ? '1': '0'}}>
                        <button className="api-instruction-button" onClick={this.handleClick}>Request Token</button>
                        <h4>Instruction on how to use API:</h4>
                        <p>bleh</p>
                        <p>(click anywhere in grey to close)</p>
                    </div>
                </div>
            );
        } else {
            <p>{this.state.token}</p>
        }
    }
}

token state 信息, render() 代币 但是,除非使用,否则会显示按钮的初始界面。

ageoff 7 年前

有点不清楚你想在哪里显示结果。。。现在你正在返回一个令牌给你的onClick,它什么也不做。您应该将getToken中的标记设置为状态值,然后可以在任何地方显示它。另外值得注意的是,localStorage是异步的,因此您必须处理这个承诺。

state = ({token:''})

const getToken = (props) => {
    localStorage.getItem("token").then(result => {
      console.log('Token: ' + result)
      this.setState({token:result})
    });
}

const ApiInstruction = (props) => (
    <div>
        <Backdrop show={props.show} clicked={props.modalClosed}/>

        <div className="api-instruction"
             style={{transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
                     opacity: props.show ? '1': '0'}}>
            <button className="api-instruction-button" onClick={() => getToken(props)}>Request Token</button>
            {this.state.token != '' && <p>{this.state.token}</p>}
            <h4>Instruction on how to use API:</h4>
            <p>bleh</p>
            <p>(click anywhere in grey to close)</p>
        </div>
    </div>
);

Sakhi Mansoor 7 年前

 class ApiInstruction extends Component {
  state = {
    isLocalStorage : false
  }

  handleCLick= () => {
    getToken(this.props)
    this.setState({
      isLocalStorage  : true
    })
  }

  render() {
    const { isLocalStorage } = this.state;
    return(
  <div>
    <Backdrop show={props.show} clicked={props.modalClosed} />

    <div className="api-instruction"
      style={{
        transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
        opacity: props.show ? '1' : '0'
      }}>
      {!isLocalStorage && <button className="api-instruction-button" onClick={this.handleCLick}>Request Token</button>}
      <h4>Instruction on how to use API:</h4>
      <p>bleh</p>
      <p>(click anywhere in grey to close)</p>
    </div>
  </div>
)
}