反应列表选择选项

Question

我有一个可以保存位置名称的位置应用程序。 我正在尝试通过单击为每个保存的位置设置一个红色边框。 它所做的是改变所有类别的边框颜色。 我该如何应用它？

class Categories extends Component {
    constructor(props) {
        super(props);
        this.state = {
            term: '',
            categories: [],
            selectedCategories: [],
            hidden: true,
            checkboxState: true
        };
    }
    toggle(e) {
        this.setState({
            checkboxState: !this.state.checkboxState
        })
    }
    onChange = (event) => {
        this.setState({ term: event.target.value });
    }
    addCategory = (event) => {
        if (this.state.term === '') {
            alert('Please name your category!')
        } else {
            event.preventDefault();
            this.setState({
                term: '',
                categories: [...this.state.categories, this.state.term]
            });
        }
    }

    render() {
        return (
            <div className="categories">
                <h1>Categories</h1>
                <div className='actions'>
                    <button className="delete" onClick={this.deleteCategory}>Delete</button>
                    <button className="edit" onClick={this.editCategory}>Edit</button>

                </div>
                <p>To add new category, please enter category name</p>
                <form className="App" onSubmit={this.addCategory}>
                    <input value={this.state.term} onChange={this.onChange} />
                    <button>Add</button>
                </form>

                {this.state.categories.map((category, index) =>
                    <button
                        key={index}
                        style={this.state.checkboxState ? { borderColor: '' } : { borderColor: 'red' }}
                        checked={this.state.isChecked}
                        onClick={this.toggle.bind(this)}>
                        {category}</button>
                )}
            </div >
        );
    }
}

我希望能够单独控制每个选定的类别，以便能够删除和编辑主题。

Answer 1

您可以根据索引设置状态并检索类似的方式，

Code:
          {this.state.categories.map((category, index) =>
                        <button
                            key={index}
                            id={`checkboxState${index}`}
                            style={!this.state[`checkboxState${index}`] ? 
                             { borderColor: '' } : { border: '2px solid red' }}
                            checked={this.state.isChecked}
                            onClick={this.toggle}>
                            {category}</button>
                    )}

    You can see how I am checking the state dynamically this.state[`checkboxState${index}`] and also I have assigned an id to it.

    In toggle method:

     toggle = (e) => {
            const id = e.target.id;
            this.setState({
                [id]: !this.state[id]
            })
        }

FYI, this is a working code, you can see it 

https://codesandbox.io/s/vy3r73jkrl

Let me know if this helps you :)

Answer 2

这是一个使用反应的非常糟糕的例子。我很可能会使用this.props.children，而不是把它们塞进去。这将使其更具动态性。而不是使用州名，我们可以只使用索引。但是您会观察到，父容器通过向每个子容器传递一个方法来决定哪个子容器是红色的。单击时，子级会触发父级的方法。您实现它的方式可能千变万化，但总体思路应该可行。

class ChildContainer extends React.Component
{
  constructor(props)
  {
    super(props);

  }
  
  render() {
    let color = this.props.backgroundColor;
    return(
      <section 
        className={'child'} 
        style={{backgroundColor: color}}
        onClick={this.props.selectMe}
      >
       
      </section>
    )
  }
}

class Parent extends React.Component
{

  constructor(props)
  {
    super(props)
    
    this.state = {
      first : 'Pink',
      second : 'Pink',
      third : 'Pink',
      previous: null
    }
    this.updateChild = this.updateChild.bind(this);
  }
    
    updateChild(name)
    {
      let {state} = this;
      let previous = state.previous;
      if(previous)
      {
        state[previous] = 'Pink';
      }
      
      state[name] = 'Red';
      state.previous = name;
      this.setState(state);
    }
  
    
  render()
  {
    console.log(this)
    return(
      <section id={'parent'}>
        <ChildContainer
          selectMe={() => this.updateChild('first')}
          backgroundColor = {this.state.first}
        />
        <ChildContainer
          selectMe={() => this.updateChild('second')}
          backgroundColor = {this.state.second}
        />
        <ChildContainer
          selectMe={() => this.updateChild('third')}
          backgroundColor = {this.state.third}
        />
        
      </section>
    )
  }
}

class App extends React.Component
{
  constructor(props)
  {
    super(props)
  }
  render()

  {
    return(
      <section>
        <Parent/>
        
      </section>
    )
  }
}


React.render(<App />, document.getElementById('root'));

Answer 3

您需要跟踪每个复选框的状态，可能有一个包含所有当前选中复选框的数组。

然后，您需要检查当前类别是否在当前检查的类别数组中，而不是 this.state.checkboxState ? { borderColor: '' } : { borderColor: 'red' } 中的 this.state.checkboxState。

希望对你有帮助