小编Dac*_*nny的帖子

我正在使用这个反应选择https://github.com/JedWatson/react-select

他们正在使用

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry'},
    { value: 'vanilla', label: 'Vanilla' }
];

我的阵列设置如下不同

const columns = [
    { name: 'OrderNumber', title: 'Order Number' },
    { name: 'strawberry', title: 'Strawberry' },
    { name: 'vanilla', title: 'Vanilla' }
]

我无法改变我的阵列.我尝试使用'name'但select-react具有相同的名称props'name'.如果我将"名称"更改为"值",则会填充选择选项.但是我不想这样做.

任何人都可以教我如何通过编码将数组的"名称"更改为"值"？不是手动;)

我可以使用基于const的反应组件.

const MyComp = (prop) => ... etc

在其中我有一些JSX:

<div id="myDiv">
        Stuff Here
</div>

我有一个目前真正称为myprop的道具.

所以我想添加一个条件myDiv ...例如:

<div id="myDiv" {if myprop === true}>
        Stuff Here
</div>

因此只有在道具是真的时才会显示div.

我如何在React中执行此操作？

我正在使用“卡片”样式复选框 - 有三个不可见的复选框 ( opacity: 0) 以及相应的标签，这些标签显示为带背景的框。

单击标签时，复选框被选中，并且我将其标签更改为蓝色背景。这一切都工作正常，只是我发现当标签本身通过按空格键获得焦点时，我无法通过标签浏览并选择相应的复选框。

复选框本身可以使用空格键进行切换和选择，但当标签聚焦在...它位于标签之间时则不能。

注意：我在标签上设置了tabindex="0"，这样可以集中并突出显示它们。

有没有什么方法可以不用 JavaScript 来完成这个任务呢？我正在开发 Angular 应用程序的 UI，但我没有太多 Angular 知识。

我知道不同浏览器的选项卡和输入选择也不一致（我正在 Chrome 中解决这个问题），所以我希望也考虑到这一点。谢谢。

/* Unchecked labels are red */
label {
  display: inline-block;  
  width: 100px;
  height: 50px;
  background-color: tomato;
}

/* Invisible checkboxes */
input[type="checkbox"] {
  opacity: 0;    
}

/* If checkbox is checked, blue background */
input[type="checkbox"]:checked + label {
  background-color: blue;
}

<input type="checkbox" id="1">
<label for="1" tabindex="0"></label>

<input type="checkbox" id="2">
<label for="2" tabindex="0"></label>

<input type="checkbox" id="3"> …

我有一个小型的Web应用程序，该应用程序使用API​​调用来获取数据，响应是报告数组，每个报告都有唯一的ID，应用程序，类型和标题。

我想通过按应用程序分组然后按描述如下的类型将其映射到新对象中。

输入：

[
  {
    "id": "REPORT1",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT2",
    "application": "APP1",
    "type": "TYPE1",
    "title": ""
  },
  {
    "id": "REPORT3",
    "application": "APP1",
    "type": "TYPE2",
    "title": ""
  },
  {
    "id": "REPORT4",
    "application": "APP2",
    "type": "TYPE3",
    "title": ""
  }
]

所需的输出：

{
  "APP1": {
    "TYPE1": [
      {
        "id": "REPORT1",
        "application": "APP1",
        "type": "TYPE1",
        "title": ""
      },
      {
        "id": "REPORT2",
        "application": "APP1",
        "type": "TYPE1",
        "title": ""
      }
    ],
    "TYPE2": [
      {
        "id": "REPORT3",
        "application": "APP1",
        "type": …

我正在从 jsonplaceholder API 获取数据到我的状态。如何使用该deleteContact()方法删除数据？我最大的挣扎是如何使deleteContact()方法正确。

这种方法有错吗？

class RemoveFromAPI extends Component {

    state = {
        users: []

    }

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({ users });
            })
    }

    deleteContact () {
        axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`);
        .then(res => {
            const users = res.data;
            this.setState({ users });
        })

    }

    render() {

        const {users} = this.state

        return (
            <div>
                <ul>
                    { this.state.users.map(user => <li>{user.name}</li>)}
                </ul>

                <button
                    onClick={deleteContact}
                   >
                    Remove
                </button>

            </div>
        );
    }
}

RemoveFromAPI.propTypes = {};

export default …

我试图在使用 ReactJS 和FileReader()API 将多个图像上传到服务器之前在浏览器中预览它们。然而，我遇到的问题是每次我选择一些图像进行预览时，只显示最后一个图像。

我的代码如下所示：

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            id: "upload-photo",
            imageURI: null
        }
    }

    buildImgTag(){
        let imgTag = null;
        if (this.state.imageURI !== null) {
            imgTag = (
                <div className="photo-container">
                    <img className="photo-uploaded" src={this.state.imageURI} alt="Photo uploaded"/>
                </div>
            );
            return imgTag;
        }
    }

    readURI(e){
        if (e.target.files) {
            let filesAmount = e.target.files.length;
            let i;
            for (i = 0; i < filesAmount; i++) {
                let reader = new FileReader();
                reader.onload = function(ev) {
                    this.setState (
                        { …

我正在使用 React-Native 构建一个费用计算器，并且我有多个输入字段，用于设置计算变量。

当输入字段具有正确的值时，一切正常，但是如果用户在之前输入的内容上按退格键，然后尝试使用空字段计算利润，则总数将显示为 NaN。

到目前为止，这是我的代码：

this.state = {
       text: '',
       soldPrice: 0,
       shippingCost: 0,
       shippingCharge: 0,
       itemCost: 0,
       profit: 0,
       paypalFee: 0.30,
       paypalFeePercentage: 0.029,
       ebayFee: 0.1
     };
  }

  calculateProfit = () => {
    const { soldPrice, shippingCost, shippingCharge, itemCost,
      paypalFee, ebayFee, paypalFeePercentage
     } = this.state;


     let sp = parseFloat(soldPrice);
     const sc = parseFloat(shippingCost);
     const sCharge = parseFloat(shippingCharge);
     const ic = parseFloat(itemCost);
     const pf = parseFloat(paypalFee);
     const ef = parseFloat(ebayFee);
     const pfp = parseFloat(paypalFeePercentage);

// sp = soldPrice, sc = …

我正在开发一个带有补丁说明的应用程序，其中的 url 具有使用 React Router 定义的以下结构：

<Route path='/updates/:id?' render={(params) => <Updates {...params} />}></Route>

如果 url 包含这样的哈希部分，我希望允许用户转到文档的特定部分/updates/1#index。在这里， url 部分应该像普通 HTML 一样#index将用户发送到 div 。id='index'

我读到了有关普通 HTML 的 hashRouter 的信息，{content}但它没有按我的预期或要求工作：

<HashRouter>
  {content}
</HashRouter>

我怎样才能实现这个目标？

我有以下代码：

   if (this.places.length) {
    console.log(this.places);
    var myData = this.places.map(({ points }) => points);
    var myTotal = 0;  // Variable to hold your total

    for(var i = 0, len = myData.length; i < len; i++) {
        myTotal += myData[i][1];  // Iterate over your first array and then grab the second element add the values up
    }
    console.log(myTotal);
  }

我有一个对象 ，我需要从该对象中提取所有数组，并从该数组中仅提取一个特定值，例如点。

主要目标是将所有点求和并保存到一个新变量中。上面的代码不起作用。

我有打包成JavaScript文件的打字稿文件,最终在Web应用程序中运行.我的最终目标是在这些编译的JavaScript文件中安装计时器,这样我就可以记录执行代码块需要多长时间.为了做到这一点,我需要学习如何将数据输出到日志文件,而这(最基本的)要求我Console.log('Whatever I want to log')在JavaScript中使用某种语句.我从小开始,然后建立婴儿台阶.

由于typescript被编译成JavaScript,我必须先将任何日志记录和计时器代码放入typescript中,以便编译为JavaScript.

我尝试Console.log("...")输入typescript,以便它编译成JavaScript,并在运行JS代码时最终输出"...".但在编译期间,我收到一个错误:

"Property 'log' does not exist on type '{ new (): Console; prototype: Console; }'"

1. 为什么会这样？
2. 我该怎么做才能确保我必须首先在typescript中编写的任何"javascript代码"被正确编译？

显然,我是一个完整的新手,但我的任务仍然是.