0

У меня есть приложение back я сделал на Visual studio(api) а фронт на VS code используя react. У меня есть кнопка типа radio и после нажатие я должен получить id каждой строки на которую нажал пользователь.

введите сюда описание изображения После чего я должен передать этот массив на исполнение в API. Как эти данные постепенно вводить в массив чтобы потом его передать на c#?

Конструктор:

constructor(props){
    super(props);
    
    this.state={
        departments:[],
        modalTitle:"",
        DepartmentName:"",
        DepartmentId:0,
        DepartmentIdFilter:"",
        DepartmentNameFilter:"",
        departmentsWithoutFilter:[]
    }
}

Вот как выводиться сама таблица:

     <tbody>
    {departments.map(dep=>
        <tr key={dep.DepartmentId}>
            <td>{dep.DepartmentId}</td>
            <td>{dep.DepartmentName}</td>
            <td>
            <button type="button"
            className="btn btn-light mr-1"
            data-bs-toggle="modal"
            data-bs-target="#exampleModal"
            onClick={()=>this.editClick(dep)}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-pencil-square" viewBox="0 0 16 16">
                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                <path fillRule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                </svg>
            </button>

            <button type="button"
            className="btn btn-light mr-1"
            onClick={()=>this.deleteClick(dep.DepartmentId)}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-trash-fill" viewBox="0 0 16 16">
                <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                </svg>
            </button>
          
           
            </td>
           <td>
                <input type="radio" onClick={()=>this.} ></input>
            </td> 
        </tr>
        
        )}
        
</tbody>

</table>

Пример как я передаю 1 значение id:

 deleteClick(id){
    if(window.confirm('Are you sure?')){
    fetch(variables.API_URL+'department/'+id,{
        method:'DELETE',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json'
        }
    })
    .then(res=>res.json())
    .then((result)=>{
        alert(result);
        this.refreshList();
    },(error)=>{
        alert('Failed');
    })
    }
}

А так реализована API:

 [HttpDelete("{id}")]
    public JsonResult Delete(int id)
    {
        string query = @"
                       delete from dbo.Department
                        where DepartmentId=@DepartmentId
                        ";

        DataTable table = new DataTable();
        string sqlDataSource = _configuration.GetConnectionString("EmployeeAppCon");
        SqlDataReader myReader;
        using (SqlConnection myCon = new SqlConnection(sqlDataSource))
        {
            myCon.Open();
            using (SqlCommand myCommand = new SqlCommand(query, myCon))
            {
                myCommand.Parameters.AddWithValue("@DepartmentId", id);

                myReader = myCommand.ExecuteReader();
                table.Load(myReader);
                myReader.Close();
                myCon.Close();
            }
        }

        return new JsonResult("Deleted Successfully");
    }

2 ответа 2

0

Создай дополнительное поле в стэйте

this.state={
        departments:[],
        departmentIdsList:[],
        modalTitle:"",
        DepartmentName:"",
        DepartmentId:0,
        DepartmentIdFilter:"",
        DepartmentNameFilter:"",
        departmentsWithoutFilter:[]
    }

затем создай обработчик нажатия на кнопку radio

checkClick(id){
    this.setState(({departmentIdsList})=>[...departmentIdsList, id])
}

затем добавь его на кнопку

<td>
  <input type="radio" onClick={()=>this.checkClick(dep.DepartmentId)} ></input>
</td>

затем при нажатии на какую то кнопку должен происходить запрос на сервер в котором ты передашь этот массив

someButtonClick(){
    const {departmentIdsList}  = this.state  
    fetch(variables.API_URL+'someurl/',{
        method:'POST',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json'            
        },
        body: JSON.stringify({departmentIdsList:departmentIdsList}) 
    })
    
}

затем на кнопку навесить someButtonClisk() про обработчик бэка не подскажу

2
  • checkClick(id){ this.setState(ids =>[...ids, id]) } на данном моменте пишет ошибку TypeError: ids is not iterable
    – Aidamir
    3 сен 2021 в 18:37
  • да все верно я исправил, но это все же примерный вариант, я же не проверял на работоспособность 3 сен 2021 в 19:08
0
checkClik(id)
{
this.setState(prevState=>({departmentIdsList:[...prevState.departmentIdsList,id]}))
}

с помощью данной функции можно добавлять множество объектов в массив departamentIDSList

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 4 сен 2021 в 9:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.