小编Gau*_*oni的帖子

单击后渲染新组件

我正在练习反应并尝试在单击按钮时渲染新组件。这里的第一页是电子邮件，我要呈现的组件包含密码页面。

  class App extends React.Component {
 passwordpage(){
    return(
      <form>
        <div className="mainapp">
          <h2> Password</h2>
          <input type='Password' className="inputpassword" placeholder='Enter Password' required/>
          <div>
            <button type="submit" className="loginbutton">Next</button>
          </div>
        </div>
      </form>
    );
  };

  render() {
    return (
      <form>
        <div className="mainapp">
          <h2>Email  Id</h2>
          <input type='email' ref='enteremail'className="inputemail" placeholder='Enter Username' required/>
          <div>
            <button type="submit" onClick={this.props.passwordpage} className="loginbutton">Next</button>
          </div>
        </div>
      </form>

    );
  }
}

 ReactDOM.render(<App/>,document.getElementById('app'));

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Run Code Online (Sandbox Code Playgroud)

javascript reactjs

Gau*_*oni

lucky-day

5
推荐指数

1
解决办法

1万
查看次数

在打字稿中声明对象类型

需要声明一个对象类型。得到下面提到的错误：

 type CarKeys = "mercedes" | "mercedes-sedan" | "mercedes-hatch";

    interface Car { color: string; } 

    const KEY_MAP = { mercedes: 'mercedes', mercedes_sedan: 'mercedes-sedan', mercedes_hatch: 'mercedes-hatch'};

        const carType:Record<CarKeys, Car> = {
         [KEY_MAP.mercedes]:{ color: 'red'},
         [KEY_MAP.mercedes_sedan]: {color: 'yellow'},
         [KEY_MAP.mercedes_hatch]: {color: 'black'}
        };

Run Code Online (Sandbox Code Playgroud)

TypeScript 抛出以下错误：