React 30 秒速学：制作输入框、密码可见、滑块组件、下拉选择器、复选框组件

本文译自：30-seconds-of-react。React 30 秒速学：全篇中文翻译、学习，地址：30-seconds-of-react-zh_CN-umi，所有案例进行分析、注释、上线。

Input基础输入框

输入框组件，使用回调函数将其值传递给父组件。

使用对象解构来设置<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:

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:

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:

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 属性。