>

사용자의 입력을 기반으로 이미지를 추가하고 싶습니다.

사용자는 입력 필드에 이미지 URL을 입력하고 사용자가 양식을 제출 한 후 해당 이미지를 표시합니다.

완전한 코드는 다음과 같습니다-

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { AddRecipe } from '../actions/index';
import Modal from 'react-modal';
class AddRecipeButton extends Component {
	
	constructor() {
    	super();
 
    	this.state = {
      		modalIsOpen: false,
      		title: "",
      		ingredients: [],
      		url: ""
    	};
 
    	this.openModal = this.openModal.bind(this);
    	this.afterOpenModal = this.afterOpenModal.bind(this);
    	this.closeModal = this.closeModal.bind(this);
    	this.onURLChange = this.onURLChange.bind(this);
    	this.onAddButtonClick = this.onAddButtonClick.bind(this);
    	this.onIngChange = this.onIngChange.bind(this);
    	this.onTitleChange = this.onTitleChange.bind(this);
  	}
	openModal() {
	    this.setState({title: "",ingredients: "",url: "",modalIsOpen: true});
	}
	 
	afterOpenModal() {
	    // references are now sync'd and can be accessed.
	    
	}
	 
	closeModal() {
	    this.setState({modalIsOpen: false});
	}
	onTitleChange(event){
		this.setState({title: event.target.value});
	}
	onIngChange(event){
		let x = event.target.value.split(",");
		this.setState({ingredients: x});
	}
	onURLChange(event){
		let y = String(event.target.value);
		this.setState({url: y});
	}
	onAddButtonClick(){
		this.props.AddRecipe({title: this.state.title,ingredients: this.state.ingredients,url: this.state.url});
		this.setState({modalIsOpen: false});
	}
	render() {
		return (
			<div>
			<button className="btn btn-large" onClick={this.openModal}>
				Add Recipe
			</button>
			<Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          contentLabel="Example Modal"
          className={{
   			 base: 'myClass',
			    afterOpen: 'myClass_after-open',
			    beforeClose: 'myClass_before-close'
			  }}
        	>
     	
          <div id="modal-header">Add Recipe <button onClick={this.closeModal} id="close-btn">&times;</button></div>
          <hr id="modal-hr"></hr>
          <div>
	          <label>Recipe Title</label>
	          <input value={this.state.title} type="text" id="modal-recipe-title" onChange={this.onTitleChange}></input>
	          <label>Ingredients (Seperated by commas ,)</label>
	          <input value={this.state.ingredients} type="text" id="modal-recipe-ingredients" onChange={this.onIngChange}></input>
	          <label>Recipe Image url</label>
	          <input value={this.state.url} type="text" id="modal-img-url" onChange={this.onURLChange}></input>
          </div>
          {console.log(this.state.title + " " + this.state.ingredients + " " + this.state.url)}
          <button onClick={ this.onAddButtonClick}>Add</button>
        </Modal>
        </div>
		)
	}
}

function mapStateToProps(state){
	return {
			recipeList: state.recipeList
		};
}
function mapDispactchToProps(dispatch){
	return bindActionCreators({ AddRecipe: AddRecipe},dispatch);
}
export default connect(mapStateToProps,mapDispactchToProps)(AddRecipeButton);

그러나 해당 입력 태그의 value 속성을 console.log하면 값이 정의되지 않은 것으로 나타납니다.

처음에 URL이 빈 문자열 ""(으)로 설정되어 있고 사용자가 제공 한 URL로 설정하고 싶습니다

값을 문자열로 변환하려고 시도했지만 type = "url"을 입력했지만 성공하지 못했습니다. 이것을 달성하는 방법? 이것도 가능합니까?

  • 답변 # 1

    코드 없이는 할 수있는 일이 많지 않지만 URL을 일반 입력으로 가져 와서 컴포넌트의 state 에 저장해야합니다.  그리고 img의 src로 넣으십시오.

    핸들러에서 event.target.value 를 사용하십니까 ? 항상 문자열입니다.

    당신은 console.log this.state   this.setState 를 사용한 후 ? 그럴 경우 함수의 비동기 특성으로 인해 console.log를 사용하여 두 번째 인수로 콜백을 전달해야합니다.

    코드를 실제로 보지 않으면 다른 것을 생각할 수 없습니다.

관련 자료

  • 이전 sorting - Perl 값을 기준으로 해시를 내림차순으로 정렬 한 다음 오름차순으로 키를 입력합니다
  • 다음 java - 바코드 스캐너 결과 두 번