Question

我已经添加了一些HTML代码作为字符串来传递dangerouslySetInnerHTML()：

 allergyTable += '<td><button type="submit" id="' + this.state.renderAllergyTable[i].allergy.toString() + '" onClick' + '=' + '&#123;this.tester()&#125; className="btn btn-danger">Remove</button></td>';

在dangerouslySetInnerHTML()中运行render()时返回正常。

但出于某种原因，当我尝试使用花括号调用函数时，React在我的花括号周围不断添加引号：

只是想知道为什么React在使用onInput呈现时会在dangerouslySetInnerHTML()调用时不断注入引号。感谢。

更新了代码库：

＆＃13;

// Import packages and dependencies here
import React, { Component } from 'react';
import { BrowserRouter as Router, Redirect, Switch, Route, Link } from 'react-router-dom';
import ReactDOM from 'react-dom';
import '../IndexStyle.css';
import * as firebase from 'firebase';
import constants from '../components/constants';

// Import components here
import MainHeader from '../../src/components/MainHeader';
import MainNavbar from '../../src/components/MainNavbar';
import MainContent from '../../src/components/MainContent';
import MainFooter from '../../src/components/MainFooter';

var holdText = '';

export default class Allergies extends React.Component {
    constructor(props) {
        super(props);
        // this.printAllergyTable = "";
        this.state = {
            allergy: "",
            date: "",
            note: "",
            renderAllergyTable: [],
            allergyToRemove: "",
            idUser: "",
        };
        this.removeAllergy = this.removeAllergy.bind(this);
    }

    componentDidMount() {
        this.authUnsub = firebase.auth().onAuthStateChanged(user => {
            this.setState({ currentUser: user });
            this.setState({ authenticated: true });
            var database = firebase.database();
            var user = firebase.auth().currentUser;
            var userId = user.uid;
            console.log(userId);
            this.setState({ idUser: userId });
            console.log(this.state.idUser);
            var tank = firebase.database().ref('users/' + userId + '/allergies/');
            console.log(tank);

            // Loop through allergies
            var allergiesList = firebase.database().ref('users/' + userId + '/allergies');
            allergiesList.on('value', (snapshot) => {
                var count = 0;
                var allergyArray = [];
                snapshot.forEach(function (child) {
                    var thisAllergy = child.val();
                    allergyArray.push(thisAllergy);
                });
                this.setState({ renderAllergyTable: allergyArray });
            });
        });
    }

    componentWillUnmount() {
        this.authUnsub();
    }

    addAllergy(event) {
        event.preventDefault();
        var database = firebase.database();
        var user = firebase.auth().currentUser;
        var userId = user.uid;
        var userRef = firebase.database().ref('users/' + userId + '/allergies/');
        var editRef = userRef.push();
        var allergy = this.state.allergy;
        var dateString = (this.state.date).toString();
        var allergyObject = {
            [this.state.allergy]: {
                'allergy': [this.state.allergy],
                'date': [this.state.date],
                'note': [this.state.note],
            }
        }
        userRef.update(allergyObject);
        this.setState({ allergy: "" });
        this.setState({ date: "" });
        this.setState({ note: "" });
    }

    // removeAllergy(event) {
    //     event.preventDefault();
    //     console.log("Function called");
    //     var database = firebase.database();
    //     var user = firebase.auth().currentUser;
    //     var userId = user.uid;
    //     var removeThisAllergy = this.state.allergyToRemove;
    //     console.log(removeThisAllergy);
    //     var userRef = firebase.database().ref('users/' + userId + '/allergies/' + removeThisAllergy);
    //     userRef.remove();
    //     this.setState({ allergyToRemove: "" });
    // }

    removeAllergy() {
        console.log("Function called");
        // var database = firebase.database();
        // var user = firebase.auth().currentUser;
        // var userId = user.uid;
        // this.setState({ allergyToRemove: allergyTo});
        // var removeThisAllergy = this.state.allergyToRemove;
        // console.log(removeThisAllergy);
        // var userRef = firebase.database().ref('users/' + userId + '/allergies/' + this.state.allergyToRemove);
        // userRef.remove();
        // this.setState({ allergyToRemove: "" });
    }

    tester() {
        console.log("Hello world");
    }

    render() {

        var allergyTable = '<thead>';
        allergyTable += '<tr>';
        allergyTable += '<th scope="col">Allergy</th>';
        allergyTable += '<th scope="col">Initial Date</th>';
        allergyTable += '<th scope="col">Notes</th>';
        allergyTable += '<th scope="col">Remove</th>';
        allergyTable += '</tr>';
        allergyTable += '</thead>';
        allergyTable += '<tbody>';
        for (var i = 0; i < this.state.renderAllergyTable.length; i++) {
            allergyTable += '<tr>';
            allergyTable += '<td>' + this.state.renderAllergyTable[i].allergy + '</td>';
            allergyTable += '<td>' + this.state.renderAllergyTable[i].date + '</td>';
            allergyTable += '<td>' + this.state.renderAllergyTable[i].note + '</td>';
            // var tempString = '<td><form onSubmit={event => this.removeAllergy(event)}><button type="submit" id="' + this.state.renderAllergyTable[i].allergy + '" onClick={event => this.setState({ allergyToRemove: ' + this.state.renderAllergyTable[i].allergy + '})}></button></form></td>';
            // console.log(tempString);
            // allergyTable += '<td><form onSubmit="{event => this.removeAllergy(event)}"' + '><button type="submit" id="' + this.state.renderAllergyTable[i].allergy + '" onClick="{event => this.setState({ allergyToRemove: ' + this.state.renderAllergyTable[i].allergy +' })}" className="btn btn-danger">Remove</button></form></td>';
            // allergyTable += '<td><form onSubmit="{event => this.removeAllergy(event)}' + " + '><button type="submit" id="' + 'this.state.renderAllergyTable[i].allergy + '" onClick=' + " + '{event => this.setState({ allergyToRemove: ' + this.state.renderAllergyTable[i].allergy +' })}' + " + 'className="btn btn-danger">Remove</button></form></td>';
            console.log(this.state.renderAllergyTable[i].allergy.toString());
            // allergyTable += '<td><button className="btn btn-danger" onClick={this.removeAllergy(' + this.state.renderAllergyTable[i].allergy.toString() + ')}>Remove</button></td>';
            // allergyTable += '<td><button className="btn btn-danger" onClick="' + 'console.log(' + '\'Hello World\'' + ')">Remove</button></td>';
            var user = firebase.auth().currentUser;
            var soo = firebase.database().ref('/users/' + this.state.idUser + '/allergies/' + this.state.renderAllergyTable[i].allergy);
            // console.log(soo);
            // var removalString = console.log("Hello yo");
            // console.log(removalString);
            // var functionString = 'firebase.database().ref(users/' + this.state.idUser + '/allergies/' + this.state.renderAllergyTable[i].allergy.toString() + ').remove()';
            // allergyTable += '<td><button type="submit" id="' + this.state.renderAllergyTable[i].allergy.toString() + '" onClick="console.log(' + '\'' + this.state.renderAllergyTable[i].allergy + '\'' +')" className="btn btn-danger">Remove</button></td>';
            allergyTable += '<td><button type="submit" id="' + this.state.renderAllergyTable[i].allergy.toString() + '" onClick' + '=' + '&#123;this.tester()&#125; className="btn btn-danger">Remove</button></td>';
            allergyTable += '</tr>';
        }
        allergyTable += '</tbody>';

        function createPrintedAllergyTable() {
            return {__html: allergyTable};
        }

        return (
            <div className="displayContent">
                <MainNavbar />
                <div className="container container-down">
                    <h1>Allergies</h1>
                    {/* Add allergy Card */}
                        <form className="form-inline" onSubmit={event => this.addAllergy(event)}>
                            <label className="label label-success" htmlFor="allergyText">Allergy</label>
                            <input type="text" value={this.state.allergy} className="form-control mb-2 mr-sm-2 mb-sm-0" id="allergyText" onInput={event => this.setState({ allergy: event.target.value })} />
                            <label className="label label-success" htmlFor="allergyDate">Initial Date</label>
                            <input type="date" value={this.state.date} id="allergyDate" onInput={event => this.setState({ date: event.target.value })} />
                            <label className="label label-success" htmlFor="allergyNotes">Notes</label>
                            <textarea value={this.state.note} className="form-control mb-2 mr-sm-2 mb-sm-0" id="allergyNotes" onInput={event => this.setState({ note: event.target.value })}></textarea>
                            <button className="btn-success">Add</button>
                        </form>

                    <table key="someKey" className="table" dangerouslySetInnerHTML={createPrintedAllergyTable() }>
                    </table>
                </div>
            </div>
        );
    }
}

＆＃13;

dangerouslySetInnerHTML在onInput调用上围绕花括号添加引号

0 个答案: