小编fra*_*ard的帖子

在 React.js 中创建我的第一个应用程序，并希望使用 Ajax 将联系表单提交到电子邮件。我已经使用这个解决方案作为指导：https : //liusashmily.wordpress.com/author/liusashmily/但完整的组件文件不可用，只有部分，我无法联系到作者。

接触元件

// Create Component
class Contact extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            contactEmail: '',
            contactMessage: ''
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleChangeMsg = this.handleChangeMsg.bind(this);
    }

    handleChange(event) {
        this.setState({
            contactEmail: event.target.value,
        });
    }

    handleChangeMsg(event) {
        this.setState({
            contactMessage: event.target.value
        });
    }

    handleSubmit(event) {

        event.preventDefault();
        this.setState({
            type: 'info',
            message: 'Sending…'
        });

        $.ajax({

            url: 'php/mailer.php',
            type: 'POST',
            data: {
                'form_email': this.state.contactEmail,
                'form_msg': this.state.contactMessage
            },
            cache: false,
            success: function(data) {
                // Success.. …

一段时间以来，我一直在尝试将本地 JSON 文件导入我的React 组件状态，无论我谷歌多少次尝试 - 我似乎都无法让它工作。这是我的 json 文件：

{
  "products": [
    {"id": 1, "category": "paint", "name": "clowd", "type": "matt emulsion", "stocked": true, "size": "100x130", "thumbnail": "23-sm.png", "previewImg": "23.png"},
    {"id": 2, "category": "paint", "name": "dålig sikt", "type": "matt emulsion/olja/akryl", "stocked": true, "size": "100x130", "thumbnail": "24-sm.png", "previewImg": "24.png"},

    {"id": 25, "category": "print", "name": "MIMI | 2nd edition", "type": "akvarellppr, 70x100", "limited": "30", "available": "28",  "price": "3,000", "stocked": true,  "thumbnail": "mimisecond-sm.jpg", "previewImg": "mimisecond.jpg"},
    {"id": 26, "category": "print", "name": "max", "type": "uppspänd …

尝试在 React.js 项目中将图像设置为地图函数内的 div 背景，但我无法访问地图函数外的post.featured_image_src并在divStyle变量中设置为背景：

class Archive extends Component {
    render() {
        let allPosts = DataStore.getAllPosts();
        let pageData = DataStore.getPageBySlug('archive');
        let acf = pageData.acf;

        const divStyle = {
          backgroundImage: 'url(' + post.featured_image_src + ')'
        }

        return (
            <div>
                <h1>{pageData.title.rendered}</h1>
                <div className="post-container">
                  <div className="post-wrapper">
                    {allPosts.map((post, i) => {
                      return (
                        <div className="post" key={i}>
                          {post.featured_image_src
                            ? <a href={post.link}><div style={divStyle}/></a>
                            : null}
                          <h3 className="post-title"><a href={post.link} dangerouslySetInnerHTML={{__html:post.title.rendered}} /></h3>
                        </div>
                      )
                    }
                  )}
                </div>
              </div>
            </div>
        );
    }
}

任何提示都会非常可爱.. <3