Question

所以我开始使用看起来有点像这样的表单（使用reactstrap）：

<Form>
    <FormGroup check>
        <Label check>
            <Input type="checkbox" />{' '}
            Work with customers for product/service feedback
        </Label>
    </FormGroup>
    <FormGroup>
        <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
    </FormGroup>
    <FormGroup check>
        <Label check>
            <Input type="checkbox" />{' '}
            Get help with the research activity (build a survey, run experiments, analyze results, run usability or pilot studies, etc.)
        </Label>
    </FormGroup>
    <FormGroup>
        <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
    </FormGroup>
</Form>

正如您所看到的，表单中包含带有选项的复选框，并且想法是如果选中了复选框，则它应该在其下方显示textarea。也就是说，做了一些搜索并碰到了这个：

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import {
  Container,
  Card,
  CardText,
  CardImg,
  CardBody,
  CardTitle,
    Button,
    Form,
    FormGroup,
    Label,
    Input,
    FormText,
    Col,
  Row } from 'reactstrap'
import Users from "./Users";


class ConnCust extends Component {

    constructor() {
    super();

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

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

    render() {
    const content = this.state.checked
      ? <div><Input type="textarea" placeholder="content1"></Input> Content </div>
            : null;

        const content2 = this.state.checked
        ? <div><Input type="textarea" placeholder="content2"></Input> Content 2 </div>
        : null;

    return <div>
      <div>
        <label>Check</label>
        <input
          type="checkbox"
          checked={ this.state.checked }
          onChange={ this.handleChange } />
      </div>

            <div>
        <label>Check</label>
        <input
          type="checkbox"
          checked={ this.state.checked }
          onChange={ this.handleChange } />
      </div>

            { content }
            { content2 }
        </div>;


  }
}

export default ConnCust;

因此，当选中一个复选框时，它会选择两个复选框并显示两者的“内容”。我的想法是，我将有十几个复选框，对于用户选择的每个复选框，它会相应地在该复选框和标签下方显示textarea。

不确定这里到底哪里错了。与name或id标记或constructor如何设置有关？

基本上，切换是复选框。任何人都可以协助吗？

更新：

我正在工作的scneario而不是模拟。代码看起来像这样“

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import {
  Container,
  Card,
  CardText,
  CardImg,
  CardBody,
  CardTitle,
    Button,
    Form,
    FormGroup,
    Label,
    Input,
    FormText,
    Col,
  Row } from 'reactstrap'
import Users from "./Users";

  render() {
    return (
      <div>
        <Container>
          <Row>
            <Form>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" />{' '}
                        Work with customers for product/service feedback
                    </Label>
                </FormGroup>
                <FormGroup>
                    <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" />{' '}
                        Get help with the research activity (build a survey, run experiments, analyze results, run usability or pilot studies, etc.)
                    </Label>
                </FormGroup>
                <FormGroup>
                    <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" />{' '}
                        Validate new product/service ideas
                    </Label>
                </FormGroup>
                <FormGroup>
                    <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" />{' '}
                        Need assistance in Scheduling Customer Feedback meetings
                    </Label>
                </FormGroup>
                <FormGroup>
                    <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" />{' '}
                        Conduct Customer visit in person (Immerse)
                    </Label>
                </FormGroup>
                <FormGroup>
                    <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" />{' '}
                        Conduct customer visit remotely (Immerse)
                    </Label>
                </FormGroup>
                <FormGroup>
                    <Input type="textarea" name="text" id="cust1text" placeholder="please provide additional information if needed"/>
                </FormGroup>
                <Button><NavLink to="/Confirm">Submit</NavLink></Button>
            <Form>
        </Row>
        </Container>
    </div>

此方案在当前每个textarea后显示checkbox，但只有textarea应显示该选项是否已选中。

Answer 1

你可以保持数组指示复选框的状态，比如这个

state = {
checboxesStatus: new Array(10).map(() => false),
// lets say you have 10 checkboxes, you can use props, or set it after api //call, depends on you
}
Now in your render you can do something like this

    {this.state.checboxesStatus.map((element, index)=> {
      return (
        <div>
            <label>Check</label>
            <input
              type="checkbox"
              checked={ this.state.checked }
              onChange={() => this.handleChange(index) } />
           {this.state.checboxesStatus[index] &&
          <Input type="textarea" placeholder="content2"></Input>
            }
          </div>

     )
     })}

handleChange = (index) => {
 const copychecboxesStatus = [...this.state.checboxesStatus]
 copychecboxesStatus[index] = !copychecboxesStatus[index]
this.setState({
checboxesStatus: copychecboxesStatus,
})

}

这样您就可以处理任意数量的复选框。介意没有测试括号。请检查一下。

React中的多个复选框在选中时提供textareas？

1 个答案: