Question

这是我第一次涉足React。

我正在处理我想要使用两次的复选框组件。这是父组件：

    var SearchItem = React.createClass({
        getInitialState: function(){
            return { data: [] };
        },
        render: function(){
            return <div className='searchItem'>
                        <p>{this.props.data.date}</p>
                        <a href={this.props.data.url} target='_blank' {this.props.data.title}</a>
                        <p>{this.props.data.company}</p>
                        <p>{this.props.data.description}</p>    
                        <form>
                            <CheckBox value = {this.props.data.saved} id = {this.props.data.id} text = 'Save' />
                            <CheckBox value = {this.props.data.applied} id = {this.props.data.id} text = 'Applied' />
                        </form>
                    </div>
        }
    });

我想在这里做的是制作ajax put请求，根据上下文传递Saved或Applied的布尔值。这是复选框组件：

    var CheckBox = React.createClass({
        getInitialState: function(){
            return { data: [] }
        },
        handleClick: function(e){
        $.ajax({
                data: // not sure what to do here,
                dataType: 'json',
                url: '/searches/' + this.props.id + '.json',
                type: 'put',
                context: this,
                success: function(data, status, xhr){
                this.setState({
                    //  not sure what to do here
                });
                }.bind(this),
                error: function(xhr, status, err){  
                    console.log("whoops, something didn't work:"),
                    console.log(status, err.toString());
                }.bind(this)
            });
        },
        render: function(){
            var value = this.props.value;
            return (
                <label><input type='checkbox' className='checkBox' defaultChecked={value} onClick={this.handleClick} />{this.props.text}</label>
            )
        }
    });

我希望数据值如下所示：{saved： boolean }或{applied： boolean }，具体取决于这是“已保存”复选框还是已应用复选框。

问题：

1）不确定如何动态设置数据值，因此我可以重用此组件。

2）此复选框布尔技巧＆＃39; $（＆＃39;输入：复选框＆＃39;）。（＆＃39;选中＆＃39;）？ true：false＆＃39;不起作用是因为＆＃39; $（＆＃39;输入：复选框＆＃39;）＆＃39;返回页面上的每个复选框。

3）我认为成功回调中的数据应该是我更新的模型，并且我需要抓取我刚刚更新的任何属性以设置组件的状态。对？但同样，我需要确定是哪个复选框。

编辑：

这就是CheckBox组件最终看起来像。

var CheckBox = React.createClass({
        getInitialState: function(){
            return { data: [] }
        },
        componentDidMount: function(){
            this.setState({
                checked: this.props.value
            });
        },
        handleClick: function(e){
            var ajaxData = {}
            ajaxData[this.props.attribute] = !this.state.checked;
            $.ajax({
                data: ajaxData,
                dataType: 'json',
                url: '/searches/' + this.props.id + '.json',
                type: 'put',
                context: this,
                success: function(data, status, xhr){
                    this.setState({
                        checked: data[this.props.attribute]
                    });
                }.bind(this),
                error: function(xhr, status, err){  
                    console.log(status, err.toString());
                }.bind(this)
            });
        },
        render: function(){
            return (
                <label><input type='checkbox' checked={this.state.checked} className='checkBox' onClick={this.handleClick} />{this.props.text}</label>
            )
        }
    });

Answer 1

不确定如何动态设置数据值，因此我可以重用此组件。

我要做的是向Checkbox组件添加道具，告诉组件它所代表的属性。

所以父母会创建像Checkbox一样的

<CheckBox value = {this.props.data.saved} id = {this.props.data.id} text = 'Save' attribute='saved' />

然后在Checkbox你可以做

handleClick: function(e){
    var ajaxData = {};
    ajaxData[this.props.attribute] = this.state.checked;
    $.ajax({
        data: ajaxData,
        dataType: 'json',
        url: '/searches/' + this.props.id + '.json',
        type: 'put',
        context: this,
        success: function(data, status, xhr){
        this.setState({
            //  not sure what to do here
        });
        }.bind(this),
        error: function(xhr, status, err){  
            console.log("whoops, something didn't work:"),
            console.log(status, err.toString());
        }.bind(this)
    });
},

此复选框布尔技巧＆＃39; $（＆＃39;输入：复选框＆＃39;）。（＆＃39;选中＆＃39;）？ true：false＆＃39;不起作用是因为＆＃39; $（＆＃39;输入：复选框＆＃39;）＆＃39;返回页面上的每个复选框。

这样做的React方法是跟踪一个状态变量中的已检查状态，而不是继承jQuery来触发它。特别是如果你想创建一个可重用的组件。

var CheckBox = React.createClass({
    getInitialState: function(){
        return { data: [] }
    },

    componentDidMount: function() {
      this.setState({ checked: this.props.value });
    },

    toggleChecked: function() {
      this.setState({ checked: !this.state.checked });
    },

    render: function(){
        var value = this.props.value;
        return (
            <label><input type='checkbox' onChange = {this.toggleChecked} className='checkBox' defaultChecked={value} onClick={this.handleClick} />{this.props.text}</label>
        )
    }
});

注意，我删除了句柄，只是让你专注于所做的更改:)。您可以从第一个答案中获取代码并将其放在第二个答案中，并且所有代码都可以正常工作。

我认为成功回调中的数据应该是我更新的模型，并且我需要抓取我刚刚更新的任何属性以设置组件的状态。对？但同样，我需要确定它是哪个复选框。

最后，既然你现在在回调中的状态变量中有了checked属性，你可以简单地做this.setState({ checked: response.checked })或者你的回复带来的任何名字。

在ajax put request / Rails

1 个答案: