javascript - React với typescript - an toàn kiểu với setState

Vậy nên gần đây tôi phát hiện ra rằng các callback cho trình xử lý sự kiện không tốt cho hiệu suất hiển thị: https://reactjs.org/docs/handling-events.html

Tôi đang cố gắng tuân theo điều này bằng cách lấy các thuộc tính từ sự kiện trong một phương thức lớp thay vì làm điều gì đó như: onClick={({value}) => this.setState({"someProperty" as keyof State: value})} v.v.

Tuy nhiên, bây giờ khi tôi không thể khai báo rõ ràng tính an toàn kiểu trong callback đó, tôi đang cố gắng làm nó linh hoạt và trình kiểm tra kiểu của tôi chấp nhận mã dưới đây, nhưng làm sao tôi có thể khiến nó báo lỗi về việc phần tử input có thuộc tính name mà không phải là keyof State?

interface State {
  someProperty: string;
}

class MakeMeSafer extends React.Component<{}, State> {

  state: State = {
    someProperty: ''
  }

  set = ({ currentTarget: { name, value } }: React.SyntheticEvent<HTMLInputElement>): void => {
    this.setState({ [name as keyof State]: value });
  }

  render(): JSX.Element {
    return (
      <div>
        <input type="text" name="some-name-not-in-state" onChange={this.set} />
      </div>
    );
  }

}

Câu trả lời #1

Bạn đang rõ ràng ép kiểu thuộc tính name của mình thành một khóa của State, vì vậy việc trình biên dịch không báo lỗi là bình thường.

Nếu bạn cần an toàn kiểu, tôi sẽ sử dụng một closure thay vào đó:

interface State {
  someProperty: string;
}

class MakeMeSafer extends React.Component<{}, State> {

  state: State = {
    someProperty: ''
  }

  onChange = (name: keyof State) =>
    (e: React.FormEvent<HTMLInputElement>) => {
      const newValue = e.currentTarget.value;
      this.setState({name: newValue});
    }
  }

  render(): JSX.Element {
    return (
      <div>
        <input type="text" onChange={this.onChange('some-name-not-in-state')} />
      </div>
    );
  }
}