Phản ứng: Hồi này, không xác định được bên trong một chức năng thành phần

class PlayerControls extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loopActive: false,
      shuffleActive: false,
    }
  }

  render() {
    var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon"

    return (
      <div className="player-controls">
        <FontAwesome
          className="player-control-icon"
          name='refresh'
          onClick={this.onToggleLoop}
          spin={this.state.loopActive}
        />
        <FontAwesome
          className={shuffleClassName}
          name='random'
          onClick={this.onToggleShuffle}
        />
      </div>
    );
  }

  onToggleLoop(event) {
    // "this is undefined??" <--- here
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
  }

Tôi muốn cập nhật loopActivetrạng thái khi chuyển đổi, nhưng thisđối tượng không được xác định trong trình xử lý. Theo tài liệu hướng dẫn, tôi thisnên tham khảo thành phần. Tui bỏ lỡ điều gì vậy?

ES6 React.Component không tự động liên kết các phương thức với chính nó. Bạn cần phải ràng buộc chúng trong constructor. Như thế này:

constructor (props){
  super(props);

  this.state = {
      loopActive: false,
      shuffleActive: false,
    };

  this.onToggleLoop = this.onToggleLoop.bind(this);

}

Có một vài cách khác nhau.

Một là thêm this.onToggleLoop = this.onToggleLoop.bind(this);vào constructor.

Một chức năng khác là mũi tên onToggleLoop = (event) => {...}.

Và sau đó là có onClick={this.onToggleLoop.bind(this)}.

Viết hàm của bạn theo cách này:

onToggleLoop = (event) => {
    this.setState({loopActive: !this.state.loopActive})
    this.props.onToggleLoop()
}

Chức năng Mũi tên Chất béo

ràng buộc cho từ khóa này là giống nhau bên ngoài và bên trong chức năng mũi tên chất béo. Điều này khác với các hàm được khai báo với hàm, có thể liên kết nó với một đối tượng khác khi gọi. Việc duy trì liên kết này rất thuận tiện cho các hoạt động như ánh xạ: this.items.map (x => this.doSthingWith (x)).

Tôi đã chạy vào một liên kết tương tự trong một chức năng kết xuất và cuối cùng đã vượt qua bối cảnh thistheo cách sau:

{someList.map(function(listItem) {
  // your code
}, this)}

Tôi cũng đã sử dụng:

{someList.map((listItem, index) =>
    <div onClick={this.someFunction.bind(this, listItem)} />
)}

Bạn nên chú ý rằng thisphụ thuộc vào cách gọi hàm, tức là: khi một hàm được gọi là phương thức của một đối tượng, nó thisđược đặt thành đối tượng mà phương thức được gọi.

thiscó thể truy cập trong ngữ cảnh JSX làm đối tượng thành phần của bạn, vì vậy bạn có thể gọi nội tuyến của phương thức bạn muốn là thisphương thức.

Nếu bạn chỉ chuyển tham chiếu đến hàm / phương thức, có vẻ như phản ứng sẽ gọi nó là hàm độc lập.

onClick={this.onToggleLoop} // Here you just passing reference, React will invoke it as independent function and this will be undefined

onClick={()=>this.onToggleLoop()} // Here you invoking your desired function as method of this, and this in that function will be set to object from that function is called ie: your component object

Nếu bạn đang sử dụng babel, bạn liên kết 'this' bằng cách sử dụng toán tử liên kết ES7 https://babeljs.io/docs/en/babel-plugin-transform-feft-bind#auto-elf-binding

export default class SignupPage extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit(e) {
    e.preventDefault(); 

    const data = { 
      email: this.refs.email.value,
    } 
  }

  render() {

    const {errors} = this.props;

    return (
      <div className="view-container registrations new">
        <main>
          <form id="sign_up_form" onSubmit={::this.handleSubmit}>
            <div className="field">
              <input ref="email" id="user_email" type="email" placeholder="Email"  />
            </div>
            <div className="field">
              <input ref="password" id="user_password" type="new-password" placeholder="Password"  />
            </div>
            <button type="submit">Sign up</button>
          </form>
        </main>
      </div>
    )
  }

}

Nếu bạn gọi phương thức đã tạo của mình trong các phương thức vòng đời như thành phầnDidMount ... thì bạn chỉ có thể sử dụng hàm this.onToggleLoop = this.onToogleLoop.bind(this)và mũi tên chất béo onToggleLoop = (event) => {...}.

Cách tiếp cận thông thường của việc khai báo một hàm trong hàm tạo sẽ không hoạt động vì các phương thức vòng đời được gọi trước đó.

trong trường hợp của tôi đây là giải pháp = () => {}

methodName = (params) => {
//your code here with this.something
}

Trong trường hợp của tôi, đối với một thành phần không trạng thái đã nhận được ref với ForwardRef, tôi đã phải thực hiện những gì được nói ở đây https://itnext.io/reUSE-the-ref-from-forwardref-with-react-hooks-4ce9df693dd

Từ đây (onClick không có quyền truy cập tương đương với 'cái này')

const Com = forwardRef((props, ref) => {
  return <input ref={ref} onClick={() => {console.log(ref.current} } />
})

Để điều này (nó hoạt động)

const useCombinedRefs = (...refs) => {
  const targetRef = React.useRef()

  useEffect(() => {
    refs.forEach(ref => {
      if (!ref) return

      if (typeof ref === 'function') ref(targetRef.current)
      else ref.current = targetRef.current
    })
  }, [refs])

  return targetRef
}

const Com = forwardRef((props, ref) => {
  const innerRef = useRef()
  const combinedRef = useCombinedRefs(ref, innerRef)

  return <input ref={combinedRef } onClick={() => {console.log(combinedRef .current} } />
})