HTML：私は、ユーザの入力に基づいて画像を追加する方法入力欄に入力として

Question

を画像のURLを得ることができます。

ユーザーが入力フィールドに画像の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 { 
 
\t 
 
\t constructor() { 
 
    \t super(); 
 
    
 
    \t this.state = { 
 
     \t \t modalIsOpen: false, 
 
     \t \t title: "", 
 
     \t \t ingredients: [], 
 
     \t \t url: "" 
 
    \t }; 
 
    
 
    \t this.openModal = this.openModal.bind(this); 
 
    \t this.afterOpenModal = this.afterOpenModal.bind(this); 
 
    \t this.closeModal = this.closeModal.bind(this); 
 
    \t this.onURLChange = this.onURLChange.bind(this); 
 
    \t this.onAddButtonClick = this.onAddButtonClick.bind(this); 
 
    \t this.onIngChange = this.onIngChange.bind(this); 
 
    \t this.onTitleChange = this.onTitleChange.bind(this); 
 
    \t } 
 

 
\t openModal() { 
 
\t  this.setState({title: "",ingredients: "",url: "",modalIsOpen: true}); 
 
\t } 
 
\t 
 
\t afterOpenModal() { 
 
\t  // references are now sync'd and can be accessed. 
 
\t  
 
\t } 
 
\t 
 
\t closeModal() { 
 
\t  this.setState({modalIsOpen: false}); 
 
\t } 
 

 
\t onTitleChange(event){ 
 
\t \t this.setState({title: event.target.value}); 
 
\t } 
 

 
\t onIngChange(event){ 
 
\t \t let x = event.target.value.split(","); 
 
\t \t this.setState({ingredients: x}); 
 
\t } 
 

 
\t onURLChange(event){ 
 
\t \t let y = String(event.target.value); 
 
\t \t this.setState({url: y}); 
 
\t } 
 

 
\t onAddButtonClick(){ 
 
\t \t this.props.AddRecipe({title: this.state.title,ingredients: this.state.ingredients,url: this.state.url}); 
 
\t \t this.setState({modalIsOpen: false}); 
 
\t } 
 
\t render() { 
 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t <button className="btn btn-large" onClick={this.openModal}> 
 
\t \t \t \t Add Recipe 
 
\t \t \t </button> 
 
\t \t \t <Modal 
 
      isOpen={this.state.modalIsOpen} 
 
      onAfterOpen={this.afterOpenModal} 
 
      onRequestClose={this.closeModal} 
 
      contentLabel="Example Modal" 
 
      className={{ 
 
    \t \t \t base: 'myClass', 
 
\t \t \t  afterOpen: 'myClass_after-open', 
 
\t \t \t  beforeClose: 'myClass_before-close' 
 
\t \t \t }} 
 
     \t > 
 
     \t 
 
      <div id="modal-header">Add Recipe <button onClick={this.closeModal} id="close-btn">&times;</button></div> 
 
      <hr id="modal-hr"></hr> 
 
      <div> 
 
\t   <label>Recipe Title</label> 
 
\t   <input value={this.state.title} type="text" id="modal-recipe-title" onChange={this.onTitleChange}></input> 
 
\t   <label>Ingredients (Seperated by commas ,)</label> 
 
\t   <input value={this.state.ingredients} type="text" id="modal-recipe-ingredients" onChange={this.onIngChange}></input> 
 
\t   <label>Recipe Image url</label> 
 
\t   <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> 
 
\t \t) 
 
\t } 
 
} 
 

 

 
function mapStateToProps(state){ 
 
\t return { 
 
\t \t \t recipeList: state.recipeList 
 
\t \t }; 
 
} 
 

 
function mapDispactchToProps(dispatch){ 
 
\t return bindActionCreators({ AddRecipe: AddRecipe},dispatch); 
 
} 
 

 
export default connect(mapStateToProps,mapDispactchToProps)(AddRecipeButton);

しかし、私は、対応するinputタグのvalue属性をCONSOLE.LOG場合、私は未定義としてその値を取得しています。

は当初、URLが「空の文字列に設定されている」と私は、ユーザー

によって与えられたURLに設定したい私は、文字列に値を変換しようとしたと入力タイプは、=「URL」もなく、得ていません成功。これを達成する方法は？これも可能ですか？

Answer 1

コードなしで行うことはあまりありませんが、通常の入力としてURLを受け取り、コンポーネントのstateに保存してimgのsrcとして保存するだけです。ハンドラで

は、あなたがevent.target.valueを使用していますか？それは常に文字列です。

あなたがthis.setStateを使用した後this.stateをCONSOLE.LOGていますか？なぜなら、関数の非同期性のために、console.logで2番目の引数としてコールバックを渡したはずです。

私は実際にコードを見ずに何かを考えることはできません。