javascript - 面对将参数传递给reactjs中的方法的问题

Question

我正在根据类(class)创建一个演示应用程序。我按照以下方式定义了我的组件。

const Book = (props) => {
  console.log(">>>>>>>>>>>");
  console.log(props.onAnswerSelected);
  return (
    <div className="answer" onClick={props.onAnswerSelected}>
      <h4>{props.title}</h4>
    </div>
  )
}

此组件呈现书名。单击书名时，它应该将书名传递给方法 onAnswerSelected。 Book 由另一个组件 Turn 组成。

export default class Turn extends Component {

  render() {

    console.log("Turn props >>> ", this.props);
    return (
      <div className="row turn" style={{backgroundColor: this.highlightTheBackgroundColor(this.props.highlightmapping)}}>
        <div className="col-4 offset-1">
            <img src={this.props.author.imageUrl} className="authorimage" alt="Author"></img>
        </div>
        <div className="col-6">
          {this.props.books.map((title) => <Book title={title} key={title} onAnswerSelected={this.props.onAnswerSelected}></Book>)}
        </div>
      </div>
    )
  }

  highlightTheBackgroundColor(highlightmapping) {
    if(!highlightmapping) {
      highlightmapping = 'none';
    }
    let colors = {
      'none' : "none", 
      'correct' : "green",
      'wrong' : "orange"
    }
    console.log("Input mapping .>>> ", highlightmapping);
    console.log("Required highlight color >> ", colors[highlightmapping]);
    return colors[highlightmapping];
  }
}

这在另一个名为 AuthorQuiz 的组件中使用。

    class AuthorQuiz extends Component {
      render() {
        console.log("TURN DATA FOUND >>> ", this.props.turnData);

        return (
          <div className="container-fluid">

            <Hero />
            <Turn {...this.props.turnData} highlightmapping={this.props.highlightmapping} onAnswerSelected={this.props.onAnswerSelected}/>
            <Continue /> 
            <Footer />

            <PreventDefaultComponent />

            {/* <Button label="Click me!"/>
            <ButtonExntended label="Click Another"/>
            <ClickCounterComponentWithState></ClickCounterComponentWithState> */}
          </div>
        );
      }
    }

The function is defined in index.js file which is as follows:


const state = {
    turnData:  getTurnData(Authors),
    allBooks: getAllBooks(Authors),
    highlight: 'none'
}

function getAllBooks(Authors) {
    const allBooks = Authors.reduce(function (p,c, i) {
        return p.concat(c.books);
    }, []);
    return allBooks;
}

function getTurnData(Authors) {
    let allBooks = getAllBooks(Authors);
    console.log("all Books >>>> ", allBooks);
    const fourRandomBooks = shuffle(allBooks).slice(0,4);
    const answer = sample(fourRandomBooks);

    return {books: fourRandomBooks,
        author: Authors.find((author) => author.books.some((title) => title === answer))
    };
}

function onAnswerSelected(event, answer) {
    console.log("On Answer Selected called ... ", answer);
    console.log("Logging the event >>> ", event.target.text);
    const isCorrect = state.allBooks.some((book) => {
        return book === answer;
    });
    state.highlight = isCorrect? "correct" : "wrong";
    // render();
}

// function render() {
    ReactDOM.render(<AuthorQuiz {...state} onAnswerSelected={onAnswerSelected}/>, document.getElementById('root'));
// }

// render();

serviceWorker.unregister();

为了缩短问题，我省略了进口。我在方法中得到的只是事件，我在其中找不到答案。

我不确定我做错了什么。如果有人可以提供帮助。谢谢。

P.S 我从那里提到了其他问题我得到了传递事件的想法但是当我做 event.target.dataset/text/value 时我得到了未定义，我认为必须有一种 react 方式或更好的方式来传递其中的值。

更新:1 这部分不起作用，我得到了整个 h4 或 div(取决于我在控制台中单击的位置)。此外，当我尝试传递值时，它仍然没有给出函数中的值，我得到的只是函数内部的事件。

点击输出如下:

index.js:35 On Answer Selected called ...  <h4>​Roughing it​</h4>​
index.js:35 On Answer Selected called ...  <div class=​"answer" title=​"Roughing it" value=​"Roughing it">​…​</div>​<h4>​Roughing it​</h4>​</div>​

Answer 1

在您的示例中，您没有将书名传递给 onAnswerSelected 函数。您可以从 Books 组件传递它，例如

const Book = (props) => {
  console.log(">>>>>>>>>>>");
  console.log(props.onAnswerSelected);
  return (
    <div className="answer" onClick={(e) => props.onAnswerSelected(e, props.title)}>
      <h4>{props.title}</h4>
    </div>
  )
}

并在 onAnswerSelected 方法中使用 answer 参数值

另外 event.target.text/dataset/value 返回 undefined 的原因是你没有在 Book 的 div 元素上设置这些属性 并且还因为它们不是 div 上定义的属性，因此您需要在定义它们后使用 getAttribute 访问它们并从 currentTarget 中使用它，因为它定义了处理程序。

另一种可能的解决方案是

const Book = (props) => {
  console.log(">>>>>>>>>>>");
  console.log(props.onAnswerSelected);
  return (
    <div className="answer" text={props.title} onClick={props.onAnswerSelected}>
      <h4>{props.title}</h4>
    </div>
  )
}

function onAnswerSelected(event) {
    console.log("On Answer Selected called ... ", answer);
    console.log("Logging the event >>> ", event.currentTarget.getAttribute('text'));
    const answer = event.currentTarget.getAttribute('text')
    const isCorrect = state.allBooks.some((book) => {
        return book === answer;
    });
    state.highlight = isCorrect? "correct" : "wrong";
    // render();
}