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

这是使用react的一个非常糟糕的例子。我很可能使用<select multiple="multiple" id='lstBox3' class="col-md-5"> <option> // I want the Json data in these options </option> </select>而不是只是在那里塞进它们。这将使它更具动态性。而不是使用状态名称，我们可以只使用索引。但是你会观察到，父容器通过将方法传递给每个孩子来决定哪个孩子是红色的。单击时，子项将从父项触发方法。你如何实现它可以有多种不同的方式，但总体思路应该有效。

＆＃13;

this.props.children

＆＃13;

Answer 3

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

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

希望这有帮助

反应列表选择选项

3 个答案: