javascript - HTML:如何在输入字段中提供图像 url 作为输入

Question

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

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

这是完整的代码 -

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

但是如果我 console.log 相应输入标记的 value 属性，我会得到它的值未定义。

最初 url 设置为空字符串“”，我想将其设置为用户给出的 url

我也尝试将值转换为字符串并输入 type="url"但没有成功。如何实现这一目标？这可能吗？

Answer 1

如果没有代码，我们无能为力，但您应该将 url 作为普通输入，将其保存在组件的 state 中，并将其作为 img 的 src。

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

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

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