Tepki: “this” bir bileşen işlevi içinde tanımlanmamış

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

loopActiveGeçiş durumundaki durumu güncellemek istiyorum , ancak thisnesne işleyicide tanımsız. Öğretici dokümana göre this, bileşene başvurmalıyım. Bir şey mi kaçırıyorum?

ES6 React.Component yöntemleri otomatik olarak kendisine bağlamaz. Onları yapıcıda kendiniz bağlamanız gerekir. Bunun gibi:

constructor (props){
  super(props);

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

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

}

Birkaç yol var.

Birincisi yapıcıya eklemektir this.onToggleLoop = this.onToggleLoop.bind(this);.

Diğeri ok fonksiyonlarıdır onToggleLoop = (event) => {...}.

Ve sonra var onClick={this.onToggleLoop.bind(this)}.

İşlevinizi şu şekilde yazın:

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

Yağ Ok Fonksiyonları

anahtar kelime için bağlanma, bu yağ ok işlevinin içinde ve dışında aynıdır. Bu işlev çağrıldığında başka bir nesneye bağlayabilen işlevle bildirilen işlevlerden farklıdır. Bu bağlamanın korunması, eşleme gibi işlemler için çok uygundur: this.items.map (x => this.doSomethingWith (x)).

Bir render fonksiyonunda benzer bir bağla karşılaştım ve bağlamını thisaşağıdaki şekilde geçtim :

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

Ayrıca kullandım:

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

thisİşlevin nasıl çağrıldığına bağlı olduğunu fark etmelisiniz , örneğin: bir işlev bir nesnenin thisyöntemi olarak çağrıldığında, yöntemin çağrıldığı nesneye ayarlanır.

thisbileşen nesneniz olarak JSX bağlamında erişilebilir, böylece istediğiniz yöntemi satır içi thisyöntem olarak çağırabilirsiniz .

Eğer sadece fonksiyona / yönteme referans iletirseniz, tepki o fonksiyonu bağımsız fonksiyon olarak çağırır.

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 kullanıyorsanız, ES7 bağlama operatörünü kullanarak 'this'i bağlarsınız 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>
    )
  }

}

Oluşturulan yönteminizi componentDidMount ... gibi yaşam döngüsü yöntemlerinde çağırırsanız , yalnızca this.onToggleLoop = this.onToogleLoop.bind(this)ve yağ ok işlevini kullanabilirsiniz onToggleLoop = (event) => {...}.

Yaşam döngüsü yöntemleri daha önce çağrıldığından, yapıcıdaki bir işlev bildiriminin normal yaklaşımı işe yaramaz.

benim durumumda bu çözüm = () => {}

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

Benim durumumda, iletiyi forwardRef ile alan vatansız bir bileşen için, burada söylediklerini yapmak zorunda kaldım https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd

Bundan (onClick, 'this' eşdeğerine erişemez)

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

Buna (işe yarıyor)

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