30-seconds-of-react React 30 seconds learning: Full Chinese translation, learning, address: 30-seconds-of-react-zh_cn-umi, all cases with analysis, annotation, online.

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 Seconds Learning: Create a star rating component
  • React 30 Seconds Learning: Make TAB components

Input Basic Input box

An input box component that uses a callback function to pass its value to the parent component.

  • Use object deconstruction to set it up<input>Default values for some attributes of the element.
  • Render one with the appropriate properties<input>Element and useonChangeIn the eventcallbackThe function passes the input value to the parent element.
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)}
    />
  );
}
Copy the code
example 
export default function() {
  return <Input type="text" placeholder="Insert some text here..." callback={val= > console.log(val)} />;
}
Copy the code

ps:

  • The sample code
  • Running effect

PasswordRevealer The password is visible

Use the Show button to render the password entry field.

  • useReact.useState()Hook to createshownState variable and sets its value tofalse.
  • usediv>packaging<input>and<button>Element for switchingtextandpasswordThe type of the input field between.
function PasswordRevealer({ value }) {
  const [shown, setShown] = React.useState(false);

  return (
    <div>
      <input type={shown ? 'text' : 'password'} value={value} onChange={()= >{}} / ><button onClick={()= >setShown(! Shown)}> Show/hide</button>
    </div>
  );
}
Copy the code
example 
export default function() {
  return <PasswordRevealer />;
}
Copy the code

ps:

  • The sample code
  • Running effect

The Slider element

Renders the slider element, passing its value to the parent component using a callback function.

  • Use object deconstruction to set it up<input>Default values for some attributes of the element.
  • Render a render of typerangethe<input>Element and corresponding attributes, usingonChangeIn the eventcallbackThe function passes the input value to the parent element.
function Slider({ callback, disabled = false, readOnly = false }) {
  return (
    <input
      type="range"
      disabled={disabled}
      readOnly={readOnly}
      onChange={({ target: { value } }) => callback(value)}
    />
  );
}
Copy the code
example 
export default function() {
  return <Slider callback={val= > console.log(val)} />;
}
Copy the code

ps:

  • The sample code
  • Running effect

MultiselectCheckbox checkbox

Renders a checkbox list that uses a callback function to pass its selected value/value to the parent component.

  • useReact.setState()To create adataState variable and sets its initial value to equaloptions.
  • Create a functiontoggle, for switchingcheckedTo update thedataState variables, and calls passed through the component’s propsonChangeThe callback.
  • Rendering a<ul>Element and useArray. The prototype. The map ()willdataState variables are mapped to individual<li>Element, where<input>Element as their children.
  • each<input>Element hastype ='checkbox'Property and is marked asreadOnlyBecause its click event is created by the parent<li>Elements of theonClickHandler processing.
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>
  );
}
Copy the code
example 
export default function() {
  const options = [{ label: "Item One" }, { label: "Item Two" }];
  return (
    <MultiselectCheckbox
      options={options}
      onChange={data= > {
        console.log(data);
      }}
    />
  );
}
Copy the code

ps:

  • The sample code
  • Running effect

Select drop – down selector

Renders a < SELECT > element that uses a callback function to pass its value to the parent component.

  • Use object deconstruction to set it up<select>Default values for some attributes of the element.
  • Render one with the appropriate properties<select>Element and useonChangeIn the eventcallbackThe textarea function passes the value of the textarea to the parent element.
  • invaluesDestructuring is passed on the arrayvalueandtextAn array of elements as wellselectedProperty to define<select>Element initializationvalue.
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>
  );
}
Copy the code
example 
export default function() {
  let choices = [
    ["grapefruit"."Grapefruit"],
    ["lime"."Lime"],
    ["coconut"."Coconut"],
    ["mango"."Mango"]].return (
    <Select
      values={choices}
      selected={"lime"}
      callback={val= > {
        console.log(val);
      }}
    />
  );
}
Copy the code

The “selected” property of option is used instead of the “selected” property.

  • The sample code
  • Running effect