修改前端并测试
查看前端后,可以进行一些修改。
修改步骤:
编辑器中打开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'));
运行下面的命令重新构建项目
dfx build
运行下面的命令部署项目
dfx canister install --all --mode reinstall
刷新浏览器显示custom_greeting_assets canister的页面查看结果
例如:
5. 输入新的消息查看结果
最后更新于