小编Pal*_*tro的帖子

我使用的是材料ui v0.20.0，并且必须禁止使用TextField为用户保存密码。我向TextField autocomplete ='nope'添加了道具，因为并非所有浏览器都理解autocomplete ='off'。看来最新版本的Chrome 63不接受。有时它不起作用，有时却起作用。我不明白为什么它如此忙碌。当chrome要求保存密码并保存时，此后我要编辑输入，我仍然有以下内容：

  <TextField
         name='userName'
         floatingLabelText={<FormattedMessage id='users.username' />}
         value={name || ''}
         onChange={(e, name) => this.changeUser({name})}
         // autoComplete='new-password'

    /> 

    <TextField
        name='password'
        floatingLabelText={<FormattedMessage id='users.passwords.new' />}
        type='password'
        value={password || ''}
        onChange={(e, password) => this.changeUser({password})}
        autoComplete='new-password'
   />

看起来可以在Firefox（v57.0.4）中使用

默认情况下，TextField没有autoComplete ='off'

迁移到 React 16 后，我收到了很多警告，指出存在不正确的对等依赖关系。

如何使用纱线避免这些问题？

我尝试删除所有包，删除yarn.lock，然后再次添加yarn。

 warning "react-textarea-autosize@4.3.2" has incorrect peer dependency "react@>=0.14.0 <16.0.0".
warning "react-modal@2.4.1" has incorrect peer dependency "react@^0.14.0 || ^15.0.0".
warning "react-modal@2.4.1" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.0".
warning "react-komposer@2.0.0" has incorrect peer dependency "react@^0.14.7 || ^15.0.0".
warning "react-treebeard@2.0.3" has incorrect peer dependency "react@^15.5.4".
warning "react-treebeard@2.0.3" has incorrect peer dependency "react-dom@^15.5.4".
warning "babel-loader@6.4.1" has unmet peer dependency "webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc".
warning "chai-enzyme@0.8.0" has unmet peer dependency "cheerio@0.19.x || 0.20.x || 0.22.x || …

我将 Material-UIv1.0.0-beta.34 Tooltip 与 Checkbox 和 FormControlLabel 一起使用，实际上当我在一种情况下将鼠标悬停到 Checkbox 上的标签时，当我使用 FormControlLabel 创建一个新的组件（自定义）和它里面的复选框看起来工具提示没有按预期工作。

https://codesandbox.io/s/n33p76n28p

我正在尝试使用 React 和 SheetJs 库实现导出到 excel。看起来我可以下载它，但实际输出看起来不像预期的那样。我接收对象数组并使用XLSX.utils.json_to_sheet([data])API 将 JS 对象数组转换为工作表。问题是：

我在这里复制了它

我使用webpack 4并且我有两个入口点，用于在 html 中HtmlWebpackPlugin注入包文件<%=htmlWebpackPlugin.files.webpackManifest%>。

网络包配置：

const path = require('path')

// initialize version.js
require('child_process').exec('node ' + path.resolve('./../scripts/setAppVersion.js'), {cwd: '../'}, function (err, stdout, stderr) {
    console.log(err)
})

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
        main: './src/main.js',
        loginPage: './src/components/loginPage/loginPage.js',
    },
    plugins: [
        new CleanWebpackPlugin(['dist'], {
            root: path.join(__dirname, '..'),
        }),
        new extractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true,
        }),
        new HtmlWebpackPlugin({
            template: './src/index.ejs',
            hash: true,
            // inject: false,
            chunks: ['main'],
        }),
        // generate Login Page
        new …

当我将位置更改为固定时,如何创建平滑滚动.我尝试添加动画,但它不起作用.更好地使用jquery animation();

$(window).scroll(function() {
  var sticky = $('.mobile-menu'),
    scroll = $(window).scrollTop();

  if (scroll >= 40) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

header {
  padding: 20px 40px;
  background: gray;
  width: 100%;
  -webkit-transition: position 10s;
  -moz-transition: position 10s;
  -ms-transition: position 10s;
  -o-transition: position 10s;
  transition: position 10s;
}
section {
  height: 150vh;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="mobile-menu">Text here</header>
<section>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups …

我使用 Material UI 复选框组件，并尝试切换状态 onCheck，在控制台状态更改但在 UI 中没有，复选标记不会切换。我搞砸了什么。

class CheckboxInteractivity extends React.Component {

    state = {
        switched: false,
    }

    componentWillMount() {
        const {checked} = this.props
        if (checked) {
            this.setState({
                switched: true,
            })
        }
    }

    handleChange = (event, switched) => {
        this.setState({switched: !this.state.switched})
    }

    render () {
        const {switched} = this.state

        return <Checkbox
            label="Label"
            checked={switched}
            onCheck={this.handleChange}
            {...this.props}
                />
    }
}

CheckboxInteractivity.propTypes = {
    checked: PropTypes.bool,
}

export default CheckboxInteractivity

成分

<CheckboxInteractivity /> 
//working correctly
<CheckboxInteractivity checked/>
//not working 

我使用SheetJS将数据导出到excel，看起来像excel本身修复数据。数据下载良好，但是收到此警告可以吗？我从 UI 中获取了 file.xlsx，当我通过 Excel 打开它时，我收到了一些由 Excel 本身生成的警告。

代码：

const download = (url, name) => {
    let a = document.createElement('a')
    a.href = url
    a.download = name
    a.click()

    window.URL.revokeObjectURL(url)
}

function Workbook() {
    if (!(this instanceof Workbook))
        return new Workbook()

    this.SheetNames = []

    this.Sheets = {}
}

function s2ab(s) {
    const buf = new ArrayBuffer(s.length)

    const view = new Uint8Array(buf)

    for (let i=0; i !== s.length; ++i)
        view[i] = s.charCodeAt(i) & 0xFF

    return view
}

export default data => …

我在使用新React.create()api的地方有一个组件，如何测试document.activeElement应该等于当前的ref组件。

零件 ：

export class Automatic extends Component {
    componentDidMount = () => this.focusContainer()
    componentDidUpdate = () => this.focusContainer()

    container = React.createRef()
    focusContainer = () => this.container.current.focus()

 render = () => {
        return (
            <div
                name='automatic'
                onKeyPress={this.captureInput}
                onBlur={() => setTimeout(() => this.focusContainer(), 0) }
                ref={this.container}
                tabIndex={0}
            >
               ..... 
            </div>
}

旧测试（有效）：

 it('should focus container on mount', () => {
        automatic = mount(<Automatic classes={{}} />, mountContext)

        document.activeElement.should.be.equal(automatic.ref('container'))
    })

新的（无效）：

 it.only('should focus container on mount', () => { …

我尝试在输入中突出显示输入中的文本,在这种情况下我使用两种方法.据我所知,我需要返回搜索类似这样的内容:<mark>${item}<mark/>

fuzzyContains = (text, search) => {
        debugger
        if (!text)
            return false
        if (!search)
            return true

        search = search.toLowerCase()
        text = text.toString().toLowerCase()

        let previousLetterPosition = -1

        return search.split('').every(s => {
            debugger
            previousLetterPosition = text.indexOf(s, previousLetterPosition + 1)

            return previousLetterPosition !== -1
        })
    }

    handleSearch = search => {
        const {data} = this.state
        debugger
        let filteredData = data.filter(x => Object.keys(x).some(key => {
            debugger
            this.fuzzyContains(x[`<mark>${key}<mark/>`], search)}))

        this.setState({filteredData, search})
    }