React 30 秒速學：製做輸入框、密碼可見、滑塊組件、下拉選擇器、複選框組件

時間 2019-11-21

標籤 react 製做輸入密碼可見滑塊組件下拉選擇器複選框欄目 React 简体版

原文原文鏈接

本文譯自：30-seconds-of-react。React 30 秒速學：全篇中文翻譯、學習，地址：30-seconds-of-react-zh_CN-umi，全部案例進行分析、註釋、上線。react

系列文章：git

Input基礎輸入框

輸入框組件，使用回調函數將其值傳遞給父組件。github

使用對象解構來設置<input>元素的某些屬性的默認值。
使用適當的屬性渲染一個<input>元素，並使用onChange事件中的callback函數將輸入值傳遞給父元素。

function Input({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
  return (
    <input type={type} disabled={disabled} readOnly={readOnly} placeholder={placeholder} // event.target.value onChange={({ target: { value } }) => callback(value)} /> ); } 複製代碼

例子

export default function() {
  return <Input type="text" placeholder="Insert some text here..." callback={val => console.log(val)} />; } 複製代碼

ps:數組

PasswordRevealer密碼可見

使用「顯示」按鈕呈現密碼輸入字段。瀏覽器

使用React.useState()鉤子建立shown狀態變量並將其值設置爲false。
使用div>包裝<input>和<button>元素，用於切換text和password之間輸入字段的類型。

function PasswordRevealer({ value }) {
  const [shown, setShown] = React.useState(false);

  return (
    <div> <input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} /> <button onClick={() => setShown(!shown)}>顯示/隱藏</button> </div> ); } 複製代碼

例子

export default function() {
  return <PasswordRevealer />; } 複製代碼

ps:ide

Slider滑塊元素

呈現滑塊元素，使用回調函數將其值傳遞給父組件。函數

使用對象解構來設置<input>元素的某些屬性的默認值。
渲染一個類型爲range的<input>元素和相應的屬性，使用onChange事件中的callback函數將輸入值傳遞給父元素。

function Slider({ callback, disabled = false, readOnly = false }) {
  return (
    <input type="range" disabled={disabled} readOnly={readOnly} onChange={({ target: { value } }) => callback(value)} /> ); } 複製代碼

例子

export default function() {
  return <Slider callback={val => console.log(val)} />; } 複製代碼

ps:post

MultiselectCheckbox複選框

呈現一個複選框列表，該列表使用回調函數將其選定的值/值傳遞給父組件。學習

使用React.setState()建立一個data狀態變量，並將其初始值設置爲等於options。
建立一個函數toggle，用於切換checked以更新data狀態變量，並調用經過組件的props傳遞的onChange回調。
渲染一個<ul>元素並使用Array.prototype.map（）將data狀態變量映射到單獨的<li>元素，其中<input>元素做爲它們的子元素。
每一個<input>元素都有type ='checkbox'屬性並被標記爲readOnly，由於它的click事件由父<li>元素的onClick處理程序處理。

const style = {
  listContainer: {
    listStyle: 'none',
    paddingLeft: 0
  },
  itemStyle: {
    cursor: 'pointer',
    padding: 5
  }
};

function MultiselectCheckbox({ options, onChange }) {
  const [data, setData] = React.useState(options);

  const toggle = item => {
    data.map((_, key) => {
      if (data[key].label === item.label) data[key].checked = !item.checked;
    });
    setData([...data]);
    onChange(data);
  };

  return (
    <ul style={style.listContainer}> {data.map(item => { return ( <li key={item.label} style={style.itemStyle} onClick={() => toggle(item)}> <input readOnly type="checkbox" checked={item.checked || false} /> {item.label} </li> ); })} </ul> ); } 複製代碼

例子

export default function() {
  const options = [{ label: "Item One" }, { label: "Item Two" }];
  return (
    <MultiselectCheckbox options={options} onChange={data => { console.log(data); }} /> ); } 複製代碼

ps:ui

Select下拉選擇器

呈現一個<select>元素，該元素使用回調函數將其值傳遞給父組件。

使用對象解構來設置<select>元素的某些屬性的默認值。
使用適當的屬性渲染一個<select>元素，並使用onChange事件中的callback函數將textarea的值傳遞給父元素。
在values數組上使用destructuring來傳遞value和text元素的數組以及selected屬性來定義<select>元素的初始value。

function Select({ values, callback, disabled = false, readonly = false, selected }) {
  const [current, setCurrent] = React.useState(selected);
  const handleChange = ({ target: { value } }) => {
    setCurrent(value);
    callback(value);
  };
  return (
    <select value={current} disabled={disabled} readOnly={readonly} onChange={handleChange} > {values.map(([value, text]) => ( <option value={value} key={value}> {text} </option> ))} </select>
  );
}
複製代碼

例子

export default function() {
  let choices = [
    ["grapefruit", "Grapefruit"],
    ["lime", "Lime"],
    ["coconut", "Coconut"],
    ["mango", "Mango"]
  ];
  return (
    <Select values={choices} selected={"lime"} callback={val => { console.log(val); }} /> ); } 複製代碼