Question

我正在从课程中创建一个演示应用程序。我已经按照以下方式定义了组件。

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

此组件呈现书名。单击书名后，应将书名传递给方法onAnswerSelected。本书由另一个组件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();

为了简化问题，我省略了导入。我所得到的只是方法中的事件，我无法在其中找到答案。

我不确定自己在做什么错。如果有人可以帮助。谢谢。

PS我已经从那里引用了其他问题，我想到了传递事件的想法，但是当我执行event.target.dataset / text / value时，我不确定，我认为必须有一种反应方式或更好的方式传递其中的值。

更新：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的原因是，您尚未在div的{{1}}元素上设置这些属性，也因为它们不是div和因此，一旦定义了它们，就需要使用Book访问它们，并从getAttribute使用它们，因为它已定义了处理程序。

另一种可能的解决方案是

currentTarget

Answer 2

尝试使用父级中需要的数据调用该函数。

{()=>{ props.onAnswerSelected(props.title//or id)}}

如果您不想使用内联函数，请尝试

class Book extends Component {
  handleClick = () => {
    this.props.onAnswerSelected(this.props.title);
  }

  render() {
    return (
      <div className="answer" onClick={this.handleClick}>
      <h4>{props.title}</h4>
    </div>
    );
  }
}

然后，仅当道具更改时，这才重新渲染（因为现在处理程序引用不再更改）：

在React.js中将参数传递给方法时遇到的问题

2 个答案: