修改前端并测试

查看前端后,可以进行一些修改。

修改步骤:

  1. 编辑器中打开index.jsx文件,并修改style设置。例如,你可能想要修改字体并在输入框使用占位文字,可以像下面一样修改:

    // Modify the front-end in the React JavaScript
    class MyHello extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: '',
          message: '',
        };
      }
    
      async doGreet() {
        const greeting = await custom_greeting.greet(this.state.name);
        this.setState({ ...this.state, message: greeting });
      }
    
      onNameChange(ev) {
        this.setState({ ...this.state, name: ev.target.value });
      }
    
      render() {
        return (
          <div style={{ "font-family": "sans-serif" }}>
          <div style={{ "font-size": "30px" }}>
              <p>Greetings, from DFINITY!</p>
              <p> Type your message in the Name input field, then click <b> Get Greeting</b> to display the result.</p>
    
            <div style={{ "margin": "30px" }}>
              <input id="name" placeholder="Type text here" value={this.state.name} onChange={ev => this.onNameChange(ev)}></input>
              <button onClick={() => this.doGreet()}>Get Greeting!</button>
            </div>
            <div>Greeting is: "<span style={{ "color": "green" }}>{this.state.message}</span>"</div>
          </div>
        </div>
        );
      }
    }
    
    render(<MyHello />, document.getElementById('app'));
  2. 运行下面的命令重新构建项目

    dfx build
  3. 运行下面的命令部署项目

    dfx canister install --all --mode reinstall
  4. 刷新浏览器显示custom_greeting_assets canister的页面查看结果

    例如:

5. 输入新的消息查看结果

最后更新于