0

我正在创建一个程序，用户应该在其中键入正确版本的打乱句子。如下图所示。

在此处输入图像描述

我想要的是当用户有正确答案时，输入旁边会显示一个勾号。例如。

在此处输入图像描述

但是，不是针对所有输入，而是针对一个正确的输入。为了实现这个功能，我使用状态，但它并没有给我想要的结果。如何确保在特定行旁边显示一个刻度？

我的代码如下。

import React, { Component } from "react";
import { Button } from "react-bulma-components/full";
import { MdDoneAll } from "react-icons/md";
const uuidv1 = require("uuid/v1");


export default class DialogueShuffleFrame2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shuffledArray: [],
      inputAnswer: "",
      score:0,
      showTick:false
    };
    this.writeSomething = this.writeSomething.bind(this);
  }

  componentDidMount() {
    const shuffle = a => {
      var j, x, i;
      for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
      }
      return a;
    };

    let shuffledArray =
      this.props.lines[0].parts &&
      this.props.lines[0].parts.map(obj => {
        return {
          id: uuidv1(),
          parts: {
            speaker: obj.speaker,
            words: shuffle(obj.words.split(" "))
          },
          correctAnswer: obj.words
        };
      });

    this.setState({
      shuffledArray
    });
  }

  writeSomething(e) {
    e.preventDefault();
    this.setState({
      inputAnswer: e.target.value
    });
  }

  checkLines(str, obj) {
    obj.map(item => {
        //console.log(item.correctAnswer)
        if (item.correctAnswer === str.trim()) {

            //console.log('correct')
            this.setState({
                score:this.state.score + 80,
                inputAnswer:'',
                showTick:true
            })
        }
        return true
    })
  }

  render() {
    //console.log(this.state.shuffledArray);
    const shuffles =
      this.state.shuffledArray &&
      this.state.shuffledArray.map(item => (

        <li key={item.id}>
          <input onChange={this.writeSomething} />
          {this.state.showTick && <MdDoneAll style={{color:'blue'}}/>}
          <Button
              color="primary"
              onClick={() => {
                this.checkLines(this.state.inputAnswer, this.state.shuffledArray);
              }}
              size="small"
            >
              Check
            </Button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>
      ));
    return (
      <div>
        Dialogue 3<ul>{shuffles}</ul>
        {this.state.score}
      </div>
    );
  }
}
4

2 回答 2

2

this.state.showTick在您的情况下是通用的。一旦设置为 true，它将用于每个元素。您需要将其更改为一个对象并使用item.id来显示刻度。

第一的：

 this.state = {
      shuffledArray: [],
      inputAnswer: "",
      score:0,
      showTick:{}
    };

checkLines(itemId, str, obj) {
    obj.map(item => {
        //console.log(item.correctAnswer)
        if (item.correctAnswer === str.trim()) {

            //console.log('correct')
            this.setState({
                score:this.state.score + 80,
                inputAnswer:'',
                showTick:{...this.state.showTick, itemId : true}
            })
        }
        return true
    })
  }

<li key={item.id}>
          <input onChange={this.writeSomething} />
          {this.state.showTick[item.id] && <MdDoneAll style={{color:'blue'}}/>}
          <Button
              color="primary"
              onClick={() => {
                this.checkLines(item.id, this.state.inputAnswer, this.state.shuffledArray);
              }}
              size="small"
            >
              Check
            </Button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>

让我知道它是否有效。没有整个代码很难测试它。

于 2019-09-12T13:06:44.013 回答
0

首先，我在componentDidMount的生成对象中添加了一个属性showTick，showTick:false

    const shuffle = a => {
      var j, x, i;
      for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
      }
      return a;
    };

    let shuffledArray =
      this.props.lines[0].parts &&
      this.props.lines[0].parts.map(obj => {
        return {
          id: uuidv1(),
          parts: {
            speaker: obj.speaker,
            words: shuffle(obj.words.split(" ")),
            showTick:false
          },
          correctAnswer: obj.words
        };
      });

    this.setState({
      shuffledArray
    });
  }

然后在checkLines我分配的功能showTick中true

checkLines(str, obj) {
    obj.map(item => {
        //console.log(item.correctAnswer)
        if (item.correctAnswer === str.trim()) {

            //console.log('correct')
            this.setState({
                score:this.state.score + 80,
                inputAnswer:''
            })
            item.parts.showTick = true
        }
        return true
    })
  }

然后在渲染部分我展示了它。

render() {
    //console.log(this.state.shuffledArray);
    const shuffles =
      this.state.shuffledArray &&
      this.state.shuffledArray.map(item => (

        <li key={item.id}>
          {item.parts.speaker}
          <input onChange={this.writeSomething} />
          {item.parts.showTick && <MdDoneAll style={{color:'blue'}}/>}
          <Button
              color="primary"
              onClick={() => {
                this.checkLines(this.state.inputAnswer, this.state.shuffledArray);
              }}
              size="small"
            >
              Check
            </Button>
          {item.parts.words.map((word, index) => (
            <span key={index}>{`${word} `}</span>
          ))}
        </li>
      ));
    return (
      <div>
        Dialogue 3<ul>{shuffles}</ul>
        {this.state.score}
      </div>
    );
  }
于 2019-09-12T14:08:25.817 回答