Реакция Как обрабатывать отмеченные и непроверенные события для флажка, используя машинопись

Question

Привет, я новичок в React и машинописи. Я работаю над добавлением проверенного атрибута для флажка, но считаю его сложным. Я искал по SO, но все еще не мог приблизить его к работе.

Вот что я пытаюсь сделать:

Я создаю три компонента-флажка, используя один дочерний компонент [показанный здесь ]. Все они имеют свои собственные значения, которые мне нужно передать динамически.

interface ItemProps {
  readonly className?: string;
  readonly checked: boolean | undefined;
  readonly accentedUnchecked?: boolean;
  readonly imageUrl: string;
  readonly errorMessage?: string;
  readonly statusChecked?: boolean | undefined;
  readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  readonly handleClick: (event: React.ChangeEvent<HTMLInputElement>) => void; 
  };

  readonly hasError?: boolean;
  readonly title?: string;
  readonly value?: number;
  readonly description?: React.ComponentType;
}
export class Item extends React.Component<
  ItemProps,
  {
    readonly isExpanded: boolean;
    readonly checkboxStatus: boolean;
    readonly temp: boolean;
    readonly checked: boolean;    
  }
> {
  constructor(props) {
    super(props);
    this.state = {
      isExpanded: false,
      checkboxStatus: false,
      temp: false,
      checked: this.state.temp
    };
    this.handleClick = this.handleClick.bind(this);
    this.onChange = this.onChange.bind(this);    
  }`

  private onChange(e: React.ChangeEvent<HTMLInputElement>) {   
    this.setState({ temp: e.currentTarget.checked });
  }

  private readonly handleClick = e =>
    this.props.onChange({
      currentTarget: { checked: e.currentTarget.checked }
    } as any);

  render() {

    const unchecked = this.props.accentedUnchecked && this.props.checked === false;

    return (

<label className="checkbox">
          <input
            type="checkbox"
            checked={this.onChange} //Not working
            onChange={this.props.onChange}
            onClick={this.handleClick}

            id={"test"}
            data-id="0"
          />
);

Проблема в том, что я не уверен, как установить проверяемый атрибут на основе клика. когда я использую

checked={this.props.checked}

, я проверяю все флажки. Или, если я использую

checked={this.handleClick}

, я получаю сообщение об ошибке, говоря, что

не может присвоить void логическому значению "в машинописи.

Любое предложение о том, как это может быть решено будет очень полезно

Заранее спасибо

Answer 1

На самом деле вам не понадобится onClick опора здесь, а checked опора - только ожидаемое логическое значение

Согласно реактивным документам, это должно быть правильным способом, если у вас есть несколько флажков

 handleInputChange(event) {
        const target = event.target;
        const value = target.name === 'isGoing' ? target.checked : target.value;
        const name = target.name;

        this.setState({
          [name]: value
        });
      }

    <input
       name="isGoing"
       type="checkbox"
       checked={this.state.isGoing}
       onChange={this.handleInputChange} />

Answer 2

Если вы хотите быть быстрым, онлайн-демонстрация была добавлена ​​внизу. Я переписываю почти все эти вещи.

---

Некоторые замечания:

• Поскольку вы хотите повторно использовать дочерний флажок, вы не должны писать функции-обработчики внутри дочернего элемента, вместо этого выставьте его родителям.
• И onClick - MouseEvent, и onChange - ChangeEvent будут в порядке, так как он полностью контролируется, единственное, что нам нужно передать - это его идентификатор. Проверенный статус сохраняется у родителей.
• Вы можете написать вложенную проверенную логику c внутри ребенка, основываясь на реквизитах, переданных от родителей.

import * as React from "react";
import "./styles.css";

const data = [
  { id: 1, checked: 1 },
  { id: 2, checked: 0 },
  { id: 3, checked: 1 }
];

export default function App() {
  const [checkedList, setCheckedList] = React.useState(
    data.map(x => !!x.checked)
  );
  const onChangeHandler = (
    e: React.ChangeEvent<HTMLInputElement>,
    id: number
  ) => {
    const list = [...checkedList];
    list.splice(id - 1, 1, !list[id - 1]);
    setCheckedList(list);
  };
  return (
    <div className="App">
      <h1>Checkboxes</h1>
      {data.map((item, idx) => (
        <InsuranceItem
          id={item.id}
          key={item.id}
          checked={checkedList[idx]}
          onChange={onChangeHandler}
        />
      ))}
    </div>
  );
}

interface InsuranceItemProps {
  readonly id?: number;
  readonly className?: string;
  readonly checked: boolean | undefined;
  readonly accentedUnchecked?: boolean;
  readonly imageUrl?: string;
  readonly errorMessage?: string;
  readonly statusChecked?: boolean | undefined;
  readonly onChange: (
    event: React.ChangeEvent<HTMLInputElement>,
    id: number
  ) => void;
  // readonly handleClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
  readonly hasError?: boolean;
  readonly title?: string;
  readonly value?: number;
  readonly description?: React.ComponentType;
}
class InsuranceItem extends React.Component<
  InsuranceItemProps,
  {
    // readonly isExpanded: boolean;
    // readonly checkboxStatus: boolean;
    // readonly temp: boolean;
    // readonly checked: boolean;
  }
> {
  constructor(props: InsuranceItemProps) {
    super(props);
    this.state = {
      // isExpanded: false,
      // checkboxStatus: false,
      // checked: false
    };
  }

  render() {
    const { id = 0, accentedUnchecked, checked, onChange } = this.props;
    // const unchecked = accentedUnchecked && checked === false;

    return (
      <label className="checkbox">
        <input
          type="checkbox"
          checked={checked}
          onChange={e => onChange(e, id)}
          id={id.toString()}
          data-id="0"
        />
      </label>
    );
  }
}

Answer 3

Ошибка 1

Вы устанавливаете функцию вместо логического значения для checked. Что не так. Я не знаю, как TypeScript позволяет вам сделать это

Ошибка 2

Использование onClick() и onChange() вместе. Не делай этого. Используйте только один. Предпочтите onChange() onClick() здесь.

Исправленный код

// Parent Component
handleClick = (checked: boolean, id: string) => {
  this.setState(prevState => ({ 
    checked: { ...prevState.checked, [id]: checked }
  })) // or however you structured this state
}


// Child component
// Creating ID as variable 
const id = 'test';

handleClick = ev => {
  // Avoid passing `ev` directly
  this.props.handleClick(ev.currentTarget.value, id)
}

return (
          <input
            type="checkbox"
            checked={this.props.checked}
            onChange={this.handleClick}
            id={id}
            data-id="0"
          />
)