React:“ this” ไม่ได้ถูกกำหนดไว้ภายในฟังก์ชั่นส่วนประกอบ

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()
  }

ฉันต้องการอัปเดตloopActiveสถานะเป็น toggle แต่thisวัตถุไม่ได้กำหนดไว้ในตัวจัดการ ตามเอกสารการสอนฉันthisควรอ้างถึงส่วนประกอบ ฉันพลาดอะไรไปรึเปล่า?

ES6 React.Component ไม่ผูกเมธอดเข้ากับตัวเองโดยอัตโนมัติ คุณต้องผูกมันด้วยตัวคุณเองในคอนสตรัคเตอร์ แบบนี้:

constructor (props){
  super(props);

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

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

}

มีสองวิธี

หนึ่งคือการเพิ่ม this.onToggleLoop = this.onToggleLoop.bind(this);ในตัวสร้าง

onToggleLoop = (event) => {...}ก็คือฟังก์ชั่นลูกศร

onClick={this.onToggleLoop.bind(this)}แล้วมี

เขียนฟังก์ชันของคุณด้วยวิธีนี้:

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

ฟังก์ชั่นลูกศรไขมัน

การรวมคีย์เวิร์ดนี้จะเหมือนกันทั้งข้างนอกและข้างในฟังค์ชั่น fat arrow สิ่งนี้แตกต่างจากฟังก์ชั่นที่ประกาศด้วยฟังก์ชันซึ่งสามารถผูกสิ่งนี้กับวัตถุอื่นเมื่อมีการเรียกใช้ การรักษาการเชื่อมโยงนี้สะดวกสำหรับการดำเนินการเช่นการแมป: this.items.map (x => this.doSomethingWith (x))

ฉันวิ่งเข้าไปในการผูกที่คล้ายกันในฟังก์ชั่นการเรนเดอร์และจบลงด้วยการผ่านบริบทthisด้วยวิธีต่อไปนี้:

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

ฉันเคยใช้:

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

คุณควรสังเกตว่าthisขึ้นอยู่กับว่ามีการเรียกใช้ฟังก์ชันอย่างไรเช่น: เมื่อฟังก์ชั่นถูกเรียกว่าเป็นวิธีการของวัตถุมันthisจะถูกตั้งค่าเป็นวัตถุที่เรียกว่าวิธีการ

thisสามารถเข้าถึงได้ในบริบท JSX เป็นวัตถุองค์ประกอบของคุณดังนั้นคุณสามารถเรียกวิธีการที่คุณต้องการแบบอินไลน์เป็นthisวิธีการ

หากคุณเพิ่งผ่านการอ้างอิงไปยังฟังก์ชั่น / วิธีดูเหมือนว่าปฏิกิริยาจะเรียกมันว่าเป็นฟังก์ชั่นอิสระ

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

หากคุณใช้ Babel คุณจะผูก 'this' โดยใช้ตัวดำเนินการเชื่อมโยง ES7 https://babeljs.io/docs/en/babel-plugin-transform-function-bind#auto-self-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>
    )
  }

}

หากคุณเรียกวิธีการที่คุณสร้างในวิธีวงจรชีวิตเช่น componentDidMount ... คุณสามารถใช้this.onToggleLoop = this.onToogleLoop.bind(this)และฟังก์ชั่นลูกศรอ้วนonToggleLoop = (event) => {...}ได้เท่านั้น

วิธีการปกติของการประกาศของฟังก์ชั่นในตัวสร้างจะไม่ทำงานเพราะวิธีการวงจรจะถูกเรียกว่าก่อนหน้านี้

ในกรณีของฉันนี่คือทางออก= () => {}

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

ในกรณีของฉันสำหรับองค์ประกอบไร้สัญชาติที่ได้รับการอ้างอิงกับ forwardRef ฉันต้องทำในสิ่งที่มันพูดที่นี่https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd

จากสิ่งนี้ (onClick ไม่สามารถเข้าถึงเทียบเท่ากับ 'this')

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

ถึงสิ่งนี้ (มันใช้งานได้)

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} } />
})