iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
0
自我挑戰組

從JS到React的前端入門實作系列 第 16

Day16:定義函數以及其他State、輸入的值印出來

  • 分享至 

  • xImage
  •  

今天目的

今天要定義其他資料,並且印到畫面上,還有定一個輸入框,並且把值印到畫面上。

定義其他State

我們到Todolist.js檔案修改程式碼,首先我們定義一個陣列,然後用迭代,把每個值都印出來。
程式碼:

import React from 'react';
class Todolist extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          name:['da','aj','letcat'], 
        };//內部自定義的變數
      }
  render() {
    const data = this.state.name.map( (item,index) => {
    	//item 指的是每項的值 index 每項的索引值(從0開始)
        return <li key={index}> {item} </li> //有迭代時 key 要給值不然會有錯誤
    })
    return(
      <div>
          <ul>
            {data}
          </ul>
      </div>
    );
  } 
}
export default Todolist;

如圖:
https://ithelp.ithome.com.tw/upload/images/20191001/20115505n0crwX4X47.png

輸入的值印出來

新增輸入框

import React from 'react';
class Todolist extends React.Component {
  
    constructor(props) {
        super(props);
        this.state = {
          item:[], 
        };//內部自定義的變數
      }  
  render() {
    return(
      <div>
         請輸入值:<input type="text" />
      </div>
    );
  } 

}
export default Todolist;

之後,定義onchange事件,再利用本身事件(e)印出現在輸入值
另外要使用函數時要加上this.函數名,就能使用該函數

import React from 'react';
class Todolist extends React.Component {
  
    constructor(props) {
        super(props);
        this.state = {
          item:[], 
        };//內部自定義的變數
       
      }

      insert_text = (e) => { //利用本身事件(e)找到自己
        console.log(e.target.value);//印出當前的輸入值
       
      }
  render() {
    return(
      <div>
         請輸入值:<input type="text" 
         onChange={this.insert_text}/>
      </div>
    );
  } 

}
export default Todolist;

如圖:

https://ithelp.ithome.com.tw/upload/images/20191001/20115505sYpWMWfFsH.png


今日結果

現在得到即時輸入,及時輸出的功能,明天要把值存到陣列,然後在印出來到畫面。

參考資料:
https://reactjs.org/
自己


上一篇
Day15:設定內部屬性(State)以及使用State
下一篇
Day17:把輸入的值存到陣列(item),最後把陣列迭代把值印出
系列文
從JS到React的前端入門實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言