本文同时发布于掘金，地址：https://juejin.im/post/6844903846917980168
本文译自：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 属性。