Question

输入字段不接受任何值。这是渲染组件

<Row>
    {this.state.activitieslist.map((newrow,index)=>{
            return (
                <Col sm={12}>   
                    <Row className="form-row">
                        <Col sm={12}>
                            <div className="form-input">
                                <InputGroup>
                                    <InputGroup.Addon className="activity-ul"><i className="fa fa-circle"></i></InputGroup.Addon>
                                    <FormControl type="text" name="ngo-activities-undertaken" placeholder="enter your activity" value={this.state.activitieslist[index].activities} onChange={this.handleActivityChange.bind(this,this.state.activitieslist[index],index)}></FormControl>
                                </InputGroup>
                            </div>
                        </Col>
                    </Row>
                </Col>)
            })
        }
</Row>

我将状态作为对象数组

this.state = {
        activitieslist : [
            {rowValues : 'a', activities : ''},
            {rowValues : '', activities : ''}
        ],

我无法在输入字段中输入值。它没有反映我输入的任何值

handleActivityChange函数在下面给出

handleActivityChange(activitieslist,id,e){
 console.log("event " + e.target.value+" index "+id+"activitieslist"+activitieslist.activities)
   this.setState({[activitieslist.activities ]: e.target.value})
}

请帮我解决，因为我是新手。

提前致谢：）

这是我的更新代码

<Row>
                    {this.state.activitieslist.map((newrow,index)=>{
                            return (
                                <Col sm={12}>   
                                    <Row className="form-row">
                                        <Col sm={12}>
                                            <div className="form-input">
                                                <InputGroup>
                                                    <InputGroup.Addon className="activity-ul"><i className="fa fa-circle"></i></InputGroup.Addon>
                                                    <FormControl type="text" name="ngo-activities-undertaken" placeholder="enter your activity" value={this.state.activitieslist[index].activities} onChange={(e)=>{this.handleActivityChange(this.state.activitieslist[index],index,e)}} ></FormControl>
                                                </InputGroup>
                                            </div>
                                        </Col>
                                    </Row>
                                </Col>)
                            })
                        }  

                </Row>

Answer 1

<Row>
                {this.state.activitieslist.map((newrow,index)=>{
                        return (
                            <Col sm={12}>   
                                <Row className="form-row">
                                    <Col sm={12}>
                                        <div className="form-input">
                                            <InputGroup>
                                                <InputGroup.Addon className="activity-ul"><i className="fa fa-circle"></i></InputGroup.Addon>
                                                <FormControl type="text" name="ngo-activities-undertaken" placeholder="enter your activity" value={this.state.activitieslist[index].activities} onChange={this.handleActivityChange(this.state.activitieslist[index],index)}></FormControl>
                                            </InputGroup>
                                        </div>
                                    </Col>
                                </Row>
                            </Col>)
                        })
                    }  

            </Row>

替换为上面的代码

以及组件构造函数中的代码

this.handleActivityChange=this.handleActivityChange.bind(this)

响应无响应的输入字段的value属性

1 个答案: