onChange 이벤트와 함께 추가 매개 변수 전달

onChange 이벤트와 함께 추가 매개 변수 전달

내가 하려는 일:

하위 구성 요소에서 상위 구성 요소의 handleChange 함수로 문자열을 전달하려고 합니다.

현재 기능:

다음 메서드의 부모 React JS 클래스가 있습니다.

handleChange(event) {

    console.log(event.target.value);
}

렌더링 기능에는 다음이 있습니다.

<Child handleChange={this.handleChange.bind(this)} />

Child 클래스에는 다음이 있습니다.

<fieldset onChange={this.props.handleChange}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

이거 잘 돼.

대신 내가 하려는 일은:

추가하려고 합니다.section파라미터는 다음과 같이 handleChange 함수에 적용됩니다.

handleChange(section, event) {
    console.log(section);
    console.log(event.target.value);
}

그리고 Child 클래스에는 다음과 같은 것이 있습니다.

<fieldset onChange={this.props.handleChange("tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

에러가 표시되게 되었습니다.

Uncaught TypeError: Cannot read property 'target' of undefined

이 에러는 두 번째 console.log 스테이트먼트에서 발생합니다.

내가 뭘 잘못하고 있지?

또한, 나는 그 제품을 만들 것을 고려하고 있습니다.section파라미터는 옵션입니다.만약 그렇다면, 이것을 쉽게 할 수 있는 방법이 있을까요?이벤트 파라미터가 마지막이어야 할 경우 불가능할 수 있습니다.

이 글을 쓸 때:

<fieldset onChange={this.props.handleChange("tags")}>

handleChange렌더가 트리거되는 즉시 호출됩니다.

대신 다음과 같이 하십시오.

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>

자, 이제.handleChange언제가 되면 호출될까onChange핸들러가 호출됩니다.

핸들 이벤트에서 이중 화살표 기능을 사용하면 화살표 기능을 사용할 때 바인딩할 필요가 없습니다.

handleChange = tags => (event) => {
    console.log(tags);
    console.log(event.target.value);
}

그리고 아이:

<fieldset onChange={this.props.handleChange("tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

const handleChange = (tags) => (event) => {
// console.log(tags);
// console.log(event.target.value);
};

<input
      type="text"
      name="name"
      placeholder="Name"
      value={input.Iname}
      onChange={handleChange("Iname")}
    />

OP로서 당초 질문의 후속으로 이 글을 올렸습니다만, 삭제되어 회답으로 투고하도록 지시받았습니다.여기 있습니다.

리츠 반살의 대답에 근거해, 다음과 같은 것을 배웠습니다.

다음 행은 기능 이름 뒤에 괄호를 사용하면 함수가 변경되기를 기다리지 않고 즉시 호출되기 때문에 작동하지 않았습니다.

<fieldset onChange={this.props.handleChange("tags")}>

위의 기능은 동작하지 않습니다.이러한 다음과 같은 기능도 동작하지 않습니다.

<fieldset onChange={this.props.handleChange()}>

또한 위의 내용은 첫 번째 렌더링 시 즉시 호출됩니다.

여기에는 다음 두 가지 솔루션이 있습니다.

좋지 않은 방법:

<fieldset onChange={this.props.handleChange.bind(this, "tags")}>

훨씬 더 좋은 방법:

<fieldset onChange={(evt) => this.props.handleChange("tags", evt)}>

이것으로 문제가 해결되었습니다.여러분 감사합니다.

업데이트:

또한 아동 요소를 다음과 같이 변경하자는 슈밤 카트리의 제안도 조사했습니다.

<Child handleChange={(e,val) => this.handleChange(e, val)}/>

나는 그것을 사용하는 것을 깨닫지 못했습니다.bind렌더 함수에서는 렌더가 호출될 때마다 새 함수 인스턴스가 생성됩니다.따라서 저는 슈밤 카트리 방법을 사용하거나 컨스트럭터에서 방법을 바인딩할 수 있습니다.

각 렌더()에 어나니머스 함수가 정의되지 않았습니다.

대부분의 답변은 render에 정의된 익명 함수를 권장하고 있습니다.Davidicus가 지적한 바와 같이 https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36는 권장하지 않습니다.

은 그 한 바와 같이 은 Vael Victus, Vael Victus, Vael Victus를 필요로 한다.transform-class-properties.

그러나 그가 하고 있는 것은 함수를 정의하는 함수를 정의하는 것뿐입니다.그 이외의 경우에는 다음과 같이 할 수 있습니다.

constructor(props) {
  super(props);
  this.handleChange = (yourSpecialParam) => (event) => this.handleChange(yourSpecialParam).bind(this)
}

render() {
  return <button onClick={this.handleChange(1234)} >Click Me</button>
}

자식 구성 요소에서 부모 구성 요소로 매개 변수를 전달하려면 화살표 함수에 인수를 사용할 수 있습니다.

handleChange(event, section) {
    console.log(section);
    console.log(event.target.value);
}
<Child handleChange={(e, val) => this.handleChange(e, val)} />

<fieldset onChange={(e) => this.props.handleChange(e, "tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

샘플 스니펫

class App extends React.Component {
  handleChange(e, val) {
    console.log(e.target.value, val);
  }
  render() {
    return(
      <Child handleChange={(e,val) => this.handleChange(e, val)}/>
    )
  }
}

class Child extends React.Component {
  
  render() {
    return(
      <input type="text" onChange={(e) => this.props.handleChange(e, 'tab')}/>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

다음과 같이 할 수 있습니다.

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

언급URL : https://stackoverflow.com/questions/44917513/passing-an-additional-parameter-with-an-onchange-event