在反应中处理一组输入答案

【问题标题】：Handle an aray of inputs in react在反应中处理一组输入
【发布时间】：2021-05-29 13:17:33
【问题描述】：

我正在尝试处理通过“.map”函数查看的一系列输入。问题是我不能给这个字段一个特定的值。结果我无法处理 onChange 函数中的输入。

我有卡片列表，每张卡片都有一个管理员描述输入和两个按钮，每个按钮都会发送不同的请求。

这里A做了出示卡片的功能。 porplem 是输入

function createrequestcard(prop){
    return(
    <Card className="text-center" key={prop._id}>
     <div class="wrapper">
    <div id="requestspart1" class="left">
            <Card.Body>
              <Card.Title>Admin Description</Card.Title>
                <Card.Text>
                <textarea 
                // --> Value of the index in aray
                // --> Handle Change of input
                />
                </Card.Text>
             </Card.Body>
  </div>
  <div id="requestspart3" class="left">
        <Card.Body>
            <Card.Title>CREATE</Card.Title>
        <Button variant="outline-success" className="AdminRequestButton">APPROVE</Button>   
        <Button variant="outline-danger" className="AdminRequestButton">DENY</Button>
      </Card.Body>
    </div>
    </div>
</Card>
)
}

在类的初始化值中

    this.state = {
        requests: [],
        description: '', 
    }
}

请求数组从后端更新：

componentDidMount(){
    this.checkloginstatus();

    axios.get('http://localhost:3000/request', {withCredentials: true})
    .then(resp => {
      this.setState({requests: resp.data})
    }).catch(err => console.log(err))
}

在渲染函数中：

<div>
{this.state.requests.map(createrequestcard)}
</div>

非常感谢您帮助我。

【问题讨论】：

要么将您的 createrequestcard 更改为 RequestCard 组件。然后您可以轻松地处理组件中的状态或将可以更改您的state.requests 值的函数传递给createrequestcard 函数。
你想改变传递给卡片的请求对象吗？对，你能指定当用户改变卡片的文本框值时应该修改什么成员吗？

标签： javascript reactjs react-router onchange

【解决方案1】：

您可以在map 方法中传递索引，如下所示，

<div>
{this.state.requests.map((req,index) => createrequestcard(req, inex))}
</div>

function createrequestcard(prop, index){

map 方法的结构如下所示

map((element) => { ... } )
map((element, index) => { ... } )
map((element, index, array) => { ... } )

【讨论】：

【解决方案2】：

您的卡片组件应定义如下，这里我将其命名为 RequestCard（只是为了更具可读性），该组件将获取 handleOnChange 作为参数，当 onchange 事件发生时，我们会将更新的值传递给它文本区域。

function RequestCard(props){
return(
<Card className="text-center" key={prop._id}>
 <div class="wrapper">
<div id={props.id} class="left">
        <Card.Body>
          <Card.Title>Admin Description</Card.Title>
            <Card.Text>
            <textarea  
             onChange={(e)=>props.handleOnChange(e.target.value)}
            // --> Value of the index in aray
            // --> Handle Change of input
            />
            </Card.Text>
         </Card.Body>
 </div>
 <div id="requestspart3" class="left">
    <Card.Body>
        <Card.Title>CREATE</Card.Title>
    <Button variant="outline-success" className="AdminRequestButton">APPROVE</Button>   
    <Button variant="outline-danger" className="AdminRequestButton">DENY</Button>
  </Card.Body>
</div>
</div>
</Card>
 )}

现在你应该如下渲染它

<div>
  {this.state.requests.map((request,index)=>{
  return <RequestCard id={index} handleOnChange={(updatedValue)=>this.handleOnChange(index,updatedValue)}
})}

最后你的父组件的handleOnChange应该是这样的，

handleOnChange=(index,updatedValue)=>{
let curState=this.state;
curState.requests[index].value=updatedValue;//note that i am not aware what member of request you want to update
//so i assume value is the member of request object,you can change whatever you want
this.setState(curState);
}

【讨论】：