Question

我已添加状态，但显示“未定义numberSorting”

     string filename = "\\screenshot.png";
    private void Mainwindow_KeyDown(object sender, KeyEventArgs e)
    {                     
        if (e.Key == Key.P)
        {

            FrameworkElement element = UxVisual as FrameworkElement;

            var pathstr = System.IO.Path.GetDirectoryName(System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName);

            filename = "\\screenshot_" + DateTime.Now.ToFileTime() + ".png";
            Uri path = new Uri(pathstr + filename);


            CaptureScreen(element, path);
        }

Answer 1

第一个问题是this.state = { sort: numberSorting() };，这是将状态中的sort设置为未定义的局部函数numberSorting的返回值。

首先，您需要使用this来访问类上的numberSorting函数，然后您要删除()，以便获得对该函数的引用，而不是执行该函数并获取它的返回值。下面的代码段有效。

class NumberSortingRef extends React.Component {

    constructor(props) {
        super(props);
        this.state = { sort: this.numberSorting };
    }

    numberSorting = () => {
        const bSort = (arr) => {
            var length = arr.length;
            for (let i = 0; i < length; i++) {
                for (let j = 0; j < length - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        let temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }

        const arrayToInt = (arr) => {
            let arrayInt = [];
            for (let i = 0; i < arr.length; i++) {
                arrayInt[i] = parseInt(arr[i]);
            }
            return arrayInt;
        }


        var str = document.getElementById("demo").value;
        var arr = str.split(',');
        document.getElementById("result").innerHTML = bSort(arrayToInt(arr));

    }

    render() {
           return (
                <div>
                    <input type="text" id="demo" />
                    <button onClick={this.state.sort}>Show</button>
                    <p id="result" ></p>
                </div>
            );
    }
}

ReactDOM.render(
  <NumberSortingRef />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react" />

当然，正如其他人在评论中说的那样，您无需将功能设置为状态，就可以：

<button onClick={this.numberSorting}>Show</button>

关于获取输入框的值，还应该进行一些改进，输入框的值应存储在状态中，而不是用document.getElementById("demo").value访问，还更新“结果”时也应使用状态而不是状态比document.getElementById("result").innerHTML = bSort(arrayToInt(arr));

Answer 2

我认为这是您想要的代码。注意事项：

1）不要使用document.getElementById直接操作DOM节点。

2）您应该在调用numberSorting函数按钮而不是在构造函数中。

class App extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
          demo: '',
          result: ''
        };
    }

    numberSorting = () => {
        const bSort = (arr) => {
            var length = arr.length;
            for (let i = 0; i < length; i++) {
                for (let j = 0; j < length - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        let temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }

        const arrayToInt = (arr) => {
            let arrayInt = [];
            for (let i = 0; i < arr.length; i++) {
                arrayInt[i] = parseInt(arr[i]);
            }
            return arrayInt;
        }
        let arr = []
        if (this.state.demo) { 
          arr = this.state.demo.split(',')
        };
        this.setState({
          'result': bSort(arrayToInt(arr))
        })

    }

    changeHandler = ({target}) => {
      this.setState({
        [target.name]: target.value
      })
    }
    render() {
        return (
            <div>
                <input type="text" name='demo' id="demo" state={this.state.demo} onChange={this.changeHandler} />
                <button onClick={this.numberSorting}>Show</button>
                <p id="result">{this.state.result}</p>
            </div>

        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />

添加状态，以便三个独立的排序输入应起作用

2 个答案: