Question

我使用React使用复选框检索了数组数据。但是，如果我选中了一个复选框，它将全部选中。如果我选中了一个复选框，我想显示一个文本框。我该怎么解决？

class ColumnName extends Component {
  constructor(props) {
    super(props);
    this.state = { checked: false };
  }
  render() {
    if (!this.props.posts) {
      return <div />;
    }
    const content = this.state.checked ? <div> Content </div> : null;
    return (
      <ul>
        {this.props.posts.map(post => (
          <div>
            <Checkbox
              checked={this.state.checked}
              onChange={() => {
                this.setState({
                  checked: !this.state.checked
                });
              }}
            >
              {post.title}
            </Checkbox>
            {content}
          </div>
        ))}
      </ul>
    );
  }
}

export default Search;

Answer 1

我解决了这个问题。这是我的代码，我将尝试对其进行解释。首先，我创建了一个对象数组。

const dogsData = [
{
    name: 'Jackey',
    src: require('./Images/dog-1.jpg'),
    id: 1,
    completed: false
}, {
    name: 'Molly',
    src: require('./Images/dog-2.jpg'),
    id: 2
    completed: false
}, {
    name: 'Spyke',
    src: require('./Images/dog-3.jpg'),
    id: 3,
    completed: false
},


]
export default dogsData;'

然后我将该数组添加到状态中，并为this.state.dogs中的每个对象创建了一个组件，并将其添加为props ----

import dogsData from './components/dogsData'

constructor() {
super();
this.state = {
  dogs: dogsData,  //dogsData in state
}

const dogs = this.state.dogs.map(dog => {
  return (
    <Dogs dog={dog} key={dog.id} handleChange={this.handleChange} />
  )'

handleChange方法，将其添加到复选框onChange事件

handleChange(id) {
this.setState(prevState => {
  const updatedDogs = prevState.dogs.map(dog => {
    if (dog.id === id) {                
      dog.completed = !dog.completed    
    }
    else {                                      
      dog.completed = false
    }
    return dog
  })
  return {
    dogs: updatedDogs,
  }

})'

Answer 2

您有一系列帖子，并且想要为每个帖子渲染一个复选框（出现）。所有复选框的选中值都有一个状态值，更改后，每个复选框都会更新此状态。

那是你的问题。为每个复选框使用不同的选中状态，但是另一个选项可能类似于：

class ColumnName extends Component {
  constructor(props) {
    super(props);
    this.state = { selected: null };
  }

  render() {
    if (!this.props.posts) {
      return <div />;
    }

    // I assume content is something depending on which post is selected?!
    const content = this.state.selected ? <div> Content </div> : null;

    return (
      <ul>
        {this.props.posts.map(post => (
          <div>
            <Checkbox
              checked={this.state.selected === post.id}
              onChange={() => {
                this.setState({
                  selected: post.id,
                });
              }}
            >
              {post.title}
            </Checkbox>
            {content}
          </div>
        ))}
      </ul>
    );
  }
}

Answer 3

您目前只有一个用于checked的值CheckBox。相反，您可以让对象跟踪是否选中了特定的post。

示例

class ColumnName extends Component {
  state = { checked: {} };

  toggleChecked = title => {
    this.setState(previousState => {
      const checked = { ...previousState.checked };
      checked[title] = !checked[title];
      return { checked };
    });
  };

  render() {
    if (!this.props.posts) {
      return <div />;
    }

    return (
      <ul>
        {this.props.posts.map(post => (
          <div>
            <Checkbox
              checked={this.state.checked[post.title]}
              onChange={() => this.toggleChecked(post.title)}
            >
              {post.title}
            </Checkbox>
            {this.state.checked[post.title] ? <div> Content </div> : null}
          </div>
        ))}
      </ul>
    );
  }
}

Answer 4

您正在对state.checked做出反应，以使您的复选框处于未选中状态：如果选中了一个复选框，则它们都将成为复选框，因为它们将对同一状态字段做出反应。

要克服此问题，请尝试以下方法：

为所有复选框提供一个ID和一个密钥（如果您仍然不这样做，则会收到警告）。您可以为此使用数组ID，它将起作用。
将状态设为{checkboxKey：已选中}值的对象

示例

class ColumnName extends Component {
  constructor(props) {
    super(props);
    this.state = { checked: {
      // Initial state ex. 0: true
    } };
  }
  render() {
    if (!this.props.posts) {
      return <div />;
    }

    return (
      <ul>
        {this.props.posts.map((post, id) => (
          <div key={id}>
            <Checkbox
              checked={this.state.checkboxes[i].checked}
              onChange={() => {
                this.setState({
                  checked: !this.checkboxes[i].checked
                });
              }}
            >
              {post.title}
            </Checkbox>
            {content}
          </div>
        ))}
      </ul>
    );
  }
}

export default Search;

Answer 5

显然，所有帖子都已检查。这是因为所有复选框都使用相同的选中值（this.state.checked）。

您可以用不同的方式编辑示例...例如，当您在this.state.checked中发布帖子时，您可以在状态中保存已检查过的帖子，并在选中的道具集中将其保存为true。

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
        checkedPosts: [] 
    };

  }

  handleChange(post){
    let index = -1;
    let checkedPosts = this.state.checkedPosts;

    checkedPosts.forEach((elem, idx) => {
        if(elem.title === post.title){
        index = idx;
      }
    })

    if(index === -1){
        checkedPosts.push(post.title);
    }else{
        checkedPosts.splice(index, 1);
    }

    this.setState({checkedPosts:checkedPosts})
  }

  findPostInChecked(post){
    let found = false;

    this.state.checkedPosts.forEach((elem) => {
        if(elem.title === post.title){
        found = true;
      }
   })

    return found;
  }    

  render() {
    const content = this.state.checked ? <div> Content </div> : null;
    return (
      <ul>
        {this.props.posts.map(post => (
          <div key={post.title}>
            <input type="checkbox"
              checked={this.findPostInChecked.bind(post) === true}
              key = {post.title}
              onChange={this.handleChange.bind(this, post)}
            />
            {post.title}
           {content}
          </div>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <Test posts = {[{title:"Hello"}, {title:"Bye"}]}/>,
  document.getElementById('container')
);

数组复选框，仅选中一个复选框，一个事件

5 个答案: