Блог

Я настраиваю компонент, который в основном является выпадающим, и я пытаюсь выяснить, как установить его в положение where, когда я отправляю форму …. его набор для этого одного параметра. Когда я отправляю его сейчас, он отправляет все параметры на серверную часть, а не только тот, который я выбрал.

Вот мой компонент категории

 import React, { Component } from 'react'

class Categories extends Component{
    

    handleCatChange = (event) => {
        this.setState({category: event.target.value})  <------this should set the state to whatever is selected
    }

    render(){
       
        let categories = this.props.category
        let value = this.props.value
        let optionItems = categories.map((cat,index) => {
          return  <option key={index} value={value}>{cat.category}</option>
        })

        


        return (
            <div>
                <select onchange={this.handleCatChange} value={this.props.category}>
                    {this.props.category ? optionItems : <p>Loading....</p>}
                </select>
            </div>
        )
    }
}

export default Categories
 

А вот компонент RecipeInput с формой

 import React, { Component } from 'react'
import  Categories  from './Categories.js'



class RecipeInput extends Component{
    constructor(props){
        super(props)
        this.state = {
            
            category: [],
            name:'',
            ingredients: '',
            chef_name: '',
            origin: ''
            
        }
        

        
    }

    

    componentDidMount(){
        let initialCats = [];
        const BASE_URL = `http://localhost:10524`
        const CATEGORIES_URL =`${BASE_URL}/categories`
        fetch(CATEGORIES_URL)
        .then(resp => resp.json())
        .then(data => {
            
            initialCats = data.map((category) => {
                return category
            })
                this.setState({
                
                    
                    category: initialCats
                
                })   
            });
    }

   

    handleSubmit = (event) =>{
        event.preventDefault();
        this.props.postRecipes(this.state)
        this.setState({
        name:'',
        ingredients: '',
        chef_name: '',
        origin: ''
        
     })
    }

   

    
    
        

    render(){
  
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Categories category={this.state.category} value={this.state.category}/>
                    <div>
                    <label for='name'>Recipe Name:</label>
                    <input type='text' value={this.state.name} onChange={this.handleNameChange} />
                    </div>
                    <div>
                    <label for='name'>Country Origin:</label>
                    <input type='text' value={this.state.origin} onChange={this.handleOriginChange} />
                    </div>
                    <div>
                    <label for='name'>Chef Name:</label>
                    <input type='text' value={this.state.chef_name} onChange={this.handleChefChange} />
                    </div>
                    <div>
                    <label for='name'>Ingredients:</label>
                    <textarea value={this.state.ingredients} onChange={this.handleIngChange} />
                    </div>
                    <input value='submit' type='submit'/>
                </form>
            </div>
        )
    }


 


}

export default RecipeInput
 

И вот ошибка, которая возникает при отправке (кстати, ее Rails)

Я устал от нескольких способов, но не совсем понял, как использовать компонент в качестве выпадающего списка. Что мне нужно сделать?

Вот мой внутренний код, который создает запись в api

  def create
        recipe = Recipe.create(recipe_params)
        if recipe.save
            render json: recipe
        else
            render json: { error: "Couldn't save" }
        end
    end
    
    private

    def recipe_params
        params.permit(:category_id,:name,:ingredients,:chef_name,:origin,category_attribute:[:category])
    end
 

Также моя функция postRecipe

 export const postRecipes = (recipe)=>{
    const BASE_URL = `http://localhost:10524`
    const RECIPES_URL =`${BASE_URL}/recipes`

    
    const config = {
        method: "POST",
        body:JSON.stringify(recipe),
        headers: {
        "Accept": "application/json",
        "Content-type": "application/json"
     }
    }
    //category field
    return(dispatch)=>{
    fetch(RECIPES_URL,config)
    .then(response => response.json())
    .then(resp => {
        dispatch({
            type: 'Add_Recipe',
            payload:{
                
                // category:resp.category,
                name: resp.name,
                ingredients: resp.ingredients,
                chef_name: resp.chef_name,
                origin: resp.origin,
                categoryId: resp.categoryId 
            
            }
        })
    })
    //.then(response => <Recipe />)
      .catch((error) => console.log.error(error))

    }
    
    
}
 

Редактирование кода из-за рассматриваемого изменения: доступ к выбранному значению при отправке на сервер

 class Categories extends Component {
  render() {
   ...
    let optionItems = categories.map((cat, index) => {
      return (
        <option key={index} value={index}>
          {cat.category}
        </option>
      );
    });
    ...
  }
}
class RecipeInput extends Component{
    constructor(props){
        super(props)
        this.state = {
            category: [],
            name:'',
            ingredients: '',
            chef_name: '',
            origin: ''
            selectedValue: {}
        }
    }
    handleSubmit(id){
      this.setState({
        selectedValue: this.state.category[id]
      )}
    }
    ...
}
 

Вы передаете onChange и значение из компонента ввода, но вы не используете их в компоненте Categories.
Добавьте свойство onChange и value в тег.
вот ссылка

 import "./styles.css";
import React, { Component } from "react";

class Categories extends Component {
  render() {
    let categories = this.props.category;
    let onChange = this.props.onChange;
    let optionItems = categories.map((cat, index) => {
      return (
        <option key={index} value={cat.category}>
          {cat.category}
        </option>
      );
    });

    return (
      <div>
        <select onChange={(e) => onChange(e.target.value)}>
          {this.props.category.length ? optionItems : null}
        </select>
      </div>
    );
  }
}

export default function App() {
  const onChange = (value) => {
    console.log(value);
  };

  return (
    <Categories
      onChange={onChange}
      category={[{ category: "1st" }, { category: "2nd" }]}
    />
  );
}

 

Я обновил код.
Если вам нужно попробовать это онлайн, вы можете обратиться к моей песочнице
https://codesandbox.io/s/stackoverflow-qno-65730813-j32ce