从 onChange 输入元素中的函数调用获取索引值

Question

我正在用 React 开发一个应用程序。我有一个父元素，其中我有一个需要多次渲染的子组件（照片）（在下面的情况下为 7）。所以我使用了 .map 并且 allPhotos 变量在 return 函数中呈现。

父组件：

handlePhotos = (event, isSingleMulti, photoIndex) => {
    console.log("Upload Photo", event.target.files, photoIndex, isSingleMulti);
}
openFileDialog(isSingleMulti, photoIndex) {
    isSingleMulti === 'M' ? document.getElementById('multi-photo-input').click() : document.getElementById('single-photo-input').click();
}

let photosTemp = [1,2,3,4,5,6,7];
let allPhotos = photosTemp.map(ele => {

    return <Photo key={ele} photoBoxID={ele} openFileDialog={this.openFileDialog} handlePhotos={this.handlePhotos} onDeletePhoto={this.onDeletePhoto}/>
});

在我的子组件（照片）中，我有一个 div，div 的 onClick 我调用 openFileDialog，它在内部调用隐藏输入元素的点击（#single-photo-input）。输入元素的 onChange 我称之为 handlePhotos。这两个函数 handlePhotos 和 openFileDialog 都在我的父级中定义并作为道具传递给 Child (Photo)。

现在我需要的是，当调用 onChange 方法 handlePhotos 时，我想 return 每个照片的 photoBoxID 值。基本上，我想检查单击了哪个照片组件。但是每次我得到的值都是 1 而不是各自的 1、2、3 等。我做错了什么？

子组件：

const UploadImage = (props) => {
    console.log(props.photoBoxID);

    return (
    <div className="photo-root">
        <div className="photo-inner-container" onClick={() => props.openFileDialog('S')}>
            <span className="inner-text">+</span>
            <form encType="multipart/form-data" id="single-photo-form">
                <input type="file" name="file" id="single-photo-input" className="hide" accept="image/jpg, image/jpeg, image/png" 
                onChange={(event) => props.handlePhotos(event, 'S', props.photoBoxID)}/>
            </form>
        </div>
    </div>
    )
}

class Photo extends React.Component {

    render() {
        return (
            true === true ? <UploadImage {...this.props}/> : <ImagePreview {...this.props}/>
        )
    }
}

Answer 1

在打开的对话框中，您通过 ID 获取元素，但您没有唯一的 ID，因此您可以将索引附加到输入 ID 并将索引传递给 openDialog 函数，然后仅单击该特定输入。

父组件

handlePhotos = (event, isSingleMulti, photoIndex) => {
    console.log("Upload Photo", event.target.files, photoIndex, isSingleMulti);
}
openFileDialog(isSingleMulti, photoIndex) {
    isSingleMulti === 'M' ? document.getElementById(`multi-photo-input-${photoIndex}`).click() : document.getElementById(`single-photo-input-${photoIndex}`).click(); //appended index here
}

let photosTemp = [1,2,3,4,5,6,7];
let allPhotos = photosTemp.map(ele => {

    return <Photo key={ele} photoBoxID={ele} openFileDialog={this.openFileDialog} handlePhotos={this.handlePhotos} onDeletePhoto={this.onDeletePhoto}/>
});

在你的photo.js

const UploadImage = (props) => {
    console.log(props.photoBoxID);

    return (
    <div className="photo-root">
        <div className="photo-inner-container" onClick={() => props.openFileDialog('S', props.photoBoxID)}>
            <span className="inner-text">+</span>
            <form encType="multipart/form-data" id={`single-photo-form-${props.photoBoxID}`}>
                <input type="file" name="file" id={`single-photo-input-${props.photoBoxID}`} className="hide" accept="image/jpg, image/jpeg, image/png" 
                onChange={(event) => props.handlePhotos(event, 'S', props.photoBoxID)}/>
            </form>
        </div>
    </div>
    )
}

class Photo extends React.Component {

    render() {
        return (
            true === true ? <UploadImage {...this.props}/> : <ImagePreview {...this.props}/>
        )
    }
}

Answer 2

子组件：


// as is
<div className="photo-inner-container" onClick={() => props.openFileDialog('S')}>

// to be
<div className="photo-inner-container" onClick={(event) => props.openFileDialog(event, 'S')}>

父组件：


// as is
openFileDialog(isSingleMulti, photoIndex) {
    isSingleMulti === 'M' ? document.getElementById('multi-photo-input').click() : document.getElementById('single-photo-input').click();
}

// to be
openFileDialog = (event, isSingleMulti) => {
      isSingleMulti === 'M' ? document.getElementById('multi-photo-input').click() : event.currentTarget.childNodes[1].children[0].click();
}

嗯... 我试图找到另一种方法来捕捉客户点击的确切输入 lol

从 onChange 输入元素中的函数调用获取索引值

Get index value from function calling in onChange input element

html

javascript

onchange

jsx

reactjs

子组件：

父组件：