Question

我想根据用户的输入添加图片。

用户将在输入字段中输入图片网址，我会在用户提交表单后显示该图片。

这是完整的代码 -

＆＃13;

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);

＆＃13;

但是如果我在console.log中输入相应输入标记的value属性，那么我将其值视为未定义。

最初将url设置为空字符串＆＃34;＆＃34;我想将其设置为用户提供的网址

我尝试将值转换为String并输入type =＆＃34; url＆＃34;但也没有成功。怎么做到这一点？这甚至可能吗？

Answer 1

在没有代码的情况下，我们无法做很多事情，但您应该将网址作为正常输入，将其保存在组件state中，并将其作为img＆＃ 39; s src。

在处理程序中，您使用event.target.value吗？它始终是一个字符串。

使用this.state后是否安装了console.log this.setState？因为如果你这样做了，你应该使用console.log作为第二个参数传递回调，因为函数的异步性质。

如果没有真正看到代码，我就无法想到其他任何事情。

HTML：如何在输入字段中输入图像URL作为输入

1 个答案: