我如何在 React 中一次将事件附加到一个 div 块？

Question

此代码块采用一系列问题，将它们解析为自己的 div 块，并显示它们。

问题：单击已完成的复选框后，应出现一个文本框供用户键入注释into.The问题是，当我单击一个[的已完成复选框时=26=] 块，我也会检查每个其他 div 块，这会提示每隔一个 div 块出现一个文本框。

有什么建议吗？

我的代码如下：

class Questions extends Component {

state = {};

constructor() {
    super();

    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.setState({
      checked: !this.state.checked
  })
}


/*
 * This method takes an array of strings and generates them in a nicely formatted div block for the user to view
*/
renderQuestions(){
    const hidden = this.state.checked ? '' : 'hidden';

    const questions = ['Criterion 1 - Have you taken all your required courses ?', '2 - Have you taken all your required credits?',
    '3 - What is your current schedule like?', '4 - Do your laboratories meet proper safety protocols?',
    '5 - Are you required to take a senior design course?', '6 - ', '7 - ', '8 -'];

    const q = questions.map((questionsToPrint, index) =>
    <div key={'questions' + index}>
    <div id='rectanglePadding'>  {/* this indents the rectang */}
        <span id='blockStyling'>
            <span style={{textAlign: "left", paddingLeft: "20px"}}>
            <a id='textStyling'>{questionsToPrint}&nbsp;&nbsp;&nbsp;&nbsp;</a>
            <p id="lineBr" />
            <input type="checkbox" checked={ this.state.checked } onChange={ this.handleChange }/> <label>Completed </label><span id="whiteSpace"> </span>
            <input type="checkbox" /> <label>Concern </label><span id="whiteSpace"> </span>
            <input type="checkbox" /> <label>Weakness </label><span id="whiteSpace"> </span>
            <input type="checkbox" /> <label>Deficiency </label><span id="whiteSpace"> </span>
            <input type="checkbox" /> <label>Strength </label><span id="whiteSpace"> </span>
            </span>
            <br />
           <a className = { hidden } style={{float: "left"}}>Notes</a><textarea className={ hidden } style={{marginLeft : "20px", float:"left"}}> </textarea>
        </span> 
    </div>
    <br />
    </div> 
    );

    return (
        <div>{q}</div>
    );
}

render() {
    return (
    <div>
        <br />
        <div>
        <nav id='navBar' className="navbar navbar-expand-sm">
            <ul className="navbar-nav">
            <li><Link to={'/questions'} className="nav-link"><button id='btn'>Pre-Visit</button></Link></li>
            <li><Link to={'/qday0'} className="nav-link"><button id='btn'>Day 0</button></Link></li>
            <li><Link to={'/qday1'} className="nav-link"><button id='btn'>Day 1</button></Link></li>
            <li><Link to={'/exit'} className="nav-link"><button id='btn'>Exit</button></Link></li>
            </ul>
        </nav>
        </div>
        <br /><br />
        <h1 style={{textDecoration: "underline", textAlign: "center"}}>Questions: Pre-Visit</h1>
        {this.renderQuestions()}
    </div>
    );
}
}

Answer 1

您需要一些方法来维持地图中每个元素的 checked 状态。考虑以下内容，它有一个 checked 对象，它可能具有数组中每个元素的键。

请注意，此解决方案使用元素索引来设置状态对象的键。这可能好也可能不好，具体取决于您的用例（如果数组的每个元素都有一个真正的唯一键关联会更好）。

另请注意，我已将 hidden 更改为一个获取索引并根据具体情况确定元素是否隐藏的函数。

class Something extends React.Component {
  constructor() {
    super();

    this.state = { checked: {} };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(i) {
    this.setState({
      checked: {
        ...this.state.checked,
        [i]: !this.state.checked[i]
      }
    });
  }

  /*
   * This method takes an array of strings and generates them in a nicely formatted div block for the user to view
   */
  renderQuestions() {
    const hidden = (i) => this.state.checked[i] ? undefined : "hidden";

    const questions = [
      "Criterion 1 - Have you taken all your required courses ?",
      "2 - Have you taken all your required credits?",
      "3 - What is your current schedule like?",
      "4 - Do your laboratories meet proper safety protocols?",
      "5 - Are you required to take a senior design course?",
      "6 - ",
      "7 - ",
      "8 -"
    ];

    const q = questions.map((questionsToPrint, index) => (
      <div key={"questions" + index}>
        <div id="rectanglePadding">
          {" "}
          {/* this indents the rectang */}
          <span id="blockStyling">
            <span style={{ textAlign: "left", paddingLeft: "20px" }}>
              <a id="textStyling">{questionsToPrint}&nbsp;&nbsp;&nbsp;&nbsp;</a>
              <p id="lineBr" />
              <input
                type="checkbox"
                checked={this.state.checked[index] || false}
                onChange={() => this.handleChange(index)}
              />{" "}
              <label>Completed </label>
              <span id="whiteSpace"> </span>
              <input type="checkbox" /> <label>Concern </label>
              <span id="whiteSpace"> </span>
              <input type="checkbox" /> <label>Weakness </label>
              <span id="whiteSpace"> </span>
              <input type="checkbox" /> <label>Deficiency </label>
              <span id="whiteSpace"> </span>
              <input type="checkbox" /> <label>Strength </label>
              <span id="whiteSpace"> </span>
            </span>
            <br />
            <a className={hidden(index)} style={{ float: "left" }}>
              Notes
            </a>
            <textarea
              className={hidden(index)}
              style={{ marginLeft: "20px", float: "left" }}
            >
              {" "}
            </textarea>
          </span>
        </div>
        <br />
      </div>
    ));

    return <div>{q}</div>;
  }

  render() {
    return (
      <div>
        <br />
        <div>
          <nav id="navBar" className="navbar navbar-expand-sm">
            <ul className="navbar-nav">
              <li>
                <Link to={"/questions"} className="nav-link">
                  <button id="btn">Pre-Visit</button>
                </Link>
              </li>
              <li>
                <Link to={"/qday0"} className="nav-link">
                  <button id="btn">Day 0</button>
                </Link>
              </li>
              <li>
                <Link to={"/qday1"} className="nav-link">
                  <button id="btn">Day 1</button>
                </Link>
              </li>
              <li>
                <Link to={"/exit"} className="nav-link">
                  <button id="btn">Exit</button>
                </Link>
              </li>
            </ul>
          </nav>
        </div>
        <br />
        <br />
        <h1 style={{ textDecoration: "underline", textAlign: "center" }}>
          Questions: Pre-Visit
        </h1>
        {this.renderQuestions()}
      </div>
    );
  }
}

我如何在 React 中一次将事件附加到一个 div 块？

How can I attach an event to just one div block at a time in React?

javascript

onchange

dom-events

reactjs