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); }} /> ); } 复制代码

ps: 这里的实现跟官方不一样，官方使用 option 的 selected 属性，但浏览器报错说不该使用，故更改成 select 的 value 属性。